Entrer l'événement de presse clé dans JavaScript
j'ai un form avec deux boîtes de texte, une sélectionner déposer et un bouton radio . Quand la touche entre est pressée, je veux appeler une fonction javascript (définie par L'utilisateur), mais quand je l'appuie, le formulaire est soumis.
Comment puis-je empêcher la form d'être soumise lorsque la touche entrer est pressée?
14 réponses
if(characterCode == 13)
{
return false; // returning false will prevent the event from bubbling up.
}
else
{
return true;
}
OK, alors imaginez que vous ayez la boîte de texte suivante dans une forme:
<input id="scriptBox" type="text" onkeypress="return runScript(event)" />
afin d'exécuter un script" défini par l'utilisateur "à partir de cette zone de texte lorsque la touche entrée est pressée, et ne pas le faire soumettre le formulaire, voici un certain code sample . Veuillez noter que cette fonction ne fait pas de vérification d'erreur et ne fonctionnera probablement que dans IE. Pour ce faire, vous avez besoin d'une solution plus robuste, mais vous obtiendrez l'idée générale.
function runScript(e) {
//See notes about 'which' and 'key'
if (e.keyCode == 13) {
var tb = document.getElementById("scriptBox");
eval(tb.value);
return false;
}
}
retourner la valeur de la fonction avertira le gestionnaire d'événements de ne pas faire de bulles sur l'événement plus loin, et empêchera l'événement de keypress d'être manipulé plus loin.
NOTE:
il a été souligné que keyCode est maintenant déprécié . La meilleure alternative suivante which a également été déprécié .
malheureusement le standard favorisé key , qui est largement soutenu par les navigateurs modernes, a quelque comportement douteux dans IE et Edge . Tout ce qui est plus ancien que IE11 aurait encore besoin d'un polyfill .
en outre, alors que l'avertissement déprécié est assez sinistre au sujet de keyCode et which , enlever ceux-ci représenterait un changement de rupture massive à un nombre incalculable de sites Web d'héritage. Pour cette raison, il est peu probable qu'ils allez n'importe où n'importe quand bientôt.
utiliser à la fois event.which et event.keyCode :
function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code to execute here
return false;
}
return true;
};
si vous utilisez jQuery:
$('input[type=text]').on('keydown', function(e) {
if (e.which == 13) {
e.preventDefault();
}
});
de l'événement.clé = = = "Enter "
plus récent et beaucoup plus propre: utiliser event.key . plus de codes de nombres arbitraires!
const node = document.getElementsByClassName(".mySelect")[0];
node.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
event.preventDefault();
// Do more work
}
});
outrepasser l'action onsubmit du formulaire pour être un appel à votre fonction et ajouter retour false après elle, c'est à dire:
<form onsubmit="javascript:myfunc();return false;" >
détecter entrer la touche pressée sur le document entier:
$(document).keypress(function (e) {
if (e.which == 13) {
alert('enter key is pressed');
}
});
réagir js solution
handleChange: function(e) {
if (e.key == 'Enter') {
console.log('test');
}
<div>
<Input type="text"
ref = "input"
placeholder="hiya"
onKeyPress={this.handleChange}
/>
</div>
ci-dessous le code ajoutera l'auditeur pour la touche ENTER sur toute la page.
cela peut être très utile dans les écrans avec un seul bouton D'Action par exemple Se connecter, S'enregistrer, soumettre, etc.
<head>
<!--Import jQuery IMPORTANT -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--Listen to Enter key event-->
<script type="text/javascript">
$(document).keypress(function (e) {
if (e.which == 13 || event.keyCode == 13) {
alert('enter key is pressed');
}
});
</script>
</head>
Testé sur tous les navigateurs.
une solution jQuery.
je suis venu ici à la recherche d'un moyen de retarder la soumission du formulaire jusqu'à ce que l'événement flou sur l'entrée de texte ait été tiré.
$(selector).keyup(function(e){
/*
* Delay the enter key form submit till after the hidden
* input is updated.
*/
// No need to do anything if it's not the enter key
// Also only e.which is needed as this is the jQuery event object.
if (e.which !== 13) {
return;
}
// Prevent form submit
e.preventDefault();
// Trigger the blur event.
this.blur();
// Submit the form.
$(e.target).closest('form').submit();
});
serait agréable d'obtenir une version plus générale qui a déclenché tous les événements retardés plutôt que simplement le formulaire soumettre.
une façon beaucoup plus simple et efficace de mon point de vue devrait être :
function onPress_ENTER()
{
var keyPressed = event.keyCode || event.which;
//if ENTER is pressed
if(keyPressed==13)
{
alert('enter pressed');
keyPressed=null;
}
else
{
return false;
}
}
en utilisant le code typographique, et éviter les appels multiples sur la fonction
let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;
function SearchListEnter(event: KeyboardEvent) {
if (event.which !== 13) {
return;
}
// more stuff
}
<div class="nav-search" id="nav-search">
<form class="form-search">
<span class="input-icon">
<input type="text" placeholder="Search ..." class="nav-search-input" id="search_value" autocomplete="off" />
<i class="ace-icon fa fa-search nav-search-icon"></i>
</span>
<input type="button" id="search" value="Search" class="btn btn-xs" style="border-radius: 5px;">
</form>
</div>
<script type="text/javascript">
$("#search_value").on('keydown', function(e) {
if (e.which == 13) {
$("#search").trigger('click');
return false;
}
});
$("#search").on('click',function(){
alert('You press enter');
});
</script>
native js (fetch api)
document.onload = (() => {
alert('ok');
let keyListener = document.querySelector('#searchUser');
//
keyListener.addEventListener('keypress', (e) => {
if(e.keyCode === 13){
let username = e.target.value;
console.log(`username = ${username}`);
fetch(`https://api.github.com/users/${username}`,{
data: {
client_id: 'xxx',
client_secret: 'xxx'
}
})
.then((user)=>{
console.log(`user = ${user}`);
});
fetch(`https://api.github.com/users/${username}/repos`,{
data: {
client_id: 'xxx',
client_secret: 'xxx'
}
})
.then((repos)=>{
console.log(`repos = ${repos}`);
for (let i = 0; i < repos.length; i++) {
console.log(`repos ${i} = ${repos[i]}`);
}
});
}else{
console.log(`e.keyCode = ${e.keyCode}`);
}
});
})();<input _ngcontent-inf-0="" class="form-control" id="searchUser" placeholder="Github username..." type="text">si vous voulez le faire en utilisant purly java script voici un exemple qui fonctionne parfaitement
disons que c'est votre fichier html
<!DOCTYPE html>
<html>
<body style="width: 500px">
<input type="text" id="textSearch"/>
<script type="text/javascript" src="public/js/popup.js"></script>
</body>
</html>
dans votre popup .js fichier il suffit d'utiliser cette fonction
var input = document.getElementById("textSearch");
input.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
alert("yes it works,I'm happy ");
}
});