J'ai un formavec deux zones de texte, une sélection de menu déroulant et un bouton radio . Lorsque la entertouche est enfoncée, je veux appeler une fonction Javascript (définie par l'utilisateur), mais lorsque j'appuie dessus, le formulaire est soumis.
Comment empêcher l' formenvoi de la lorsque la entertouche est enfoncée?
Réponses:
if(characterCode == 13)
{
return false; // returning false will prevent the event from bubbling up.
}
else
{
return true;
}Ok, alors imaginez que vous avez la zone de texte suivante dans un formulaire:
<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 vous appuyez sur la touche Entrée et de ne pas lui soumettre le formulaire, voici un exemple de code. Veuillez noter que cette fonction ne fait aucune vérification d'erreur et ne fonctionnera probablement que dans IE. Pour ce faire, vous avez besoin d'une solution plus robuste, mais vous aurez 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;
}
}renvoyer la valeur de la fonction alertera le gestionnaire d'événements de ne plus propulser l'événement, et empêchera l'événement de pression sur les touches d'être traité davantage.
Il a été souligné qu'il keyCodeest désormais obsolète . La deuxième meilleure alternative whicha également été déconseillée .
Malheureusement, la norme préférée key, qui est largement prise en charge par les navigateurs modernes, a un comportement douteux dans IE et Edge . Tout ce qui est plus ancien que IE11 aurait toujours besoin d'un polyfill .
En outre, bien que l'avertissement obsolète soit assez inquiétant keyCodeet which, leur suppression représenterait un changement radical pour un nombre incalculable de sites Web hérités. Pour cette raison, il est peu probable qu'ils se rendent dans un avenir proche.
evalle contenu en appuyant sur un bouton n'est pas différent que s'il ouvrait les outils de développement et le faisait. Si quelque chose était enregistré dans la base de données et pouvait être ouvert par un autre utilisateur, ce serait un gros problème, mais c'est un problème complètement indépendant de ce petit extrait.
Utilisez les deux event.whichet event.keyCode:
function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code to execute here
return false;
}
return true;
};whichautres keyCode. Il est recommandé d'inclure les deux.
keydownévénement au lieu de keyupoukeypress
Si vous utilisez jQuery:
$('input[type=text]').on('keydown', function(e) {
if (e.which == 13) {
e.preventDefault();
}
});preventDefaultne semble pas arrêter la soumission du formulaire, au moins dans Chrome.
$('input[type=text]').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); } });
'keydown'est correct comme le disent les autres commentateurs. Comme il n'a pas été modifié, je mettrai à jour la réponse. J'ai utilisé cette réponse et j'ai été bloqué pendant un certain temps jusqu'à ce que je revienne et que je regarde les commentaires.
Plus récent et beaucoup plus propre: utilisation event.key. Plus de codes numériques arbitraires!
const node = document.getElementsByClassName(".mySelect")[0];
node.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
event.preventDefault();
// Do more work
}
});keyCodeest obsolète. C'est plus lisible et maintenable qu'un entier magique dans votre code
Détection de la touche Entrée enfoncée sur tout le document:
$(document).keypress(function (e) {
if (e.which == 13) {
alert('enter key is pressed');
}
});Remplacez l' onsubmitaction du formulaire pour être un appel à votre fonction et ajoutez return false après, c'est-à-dire:
<form onsubmit="javascript:myfunc();return false;" >Alors peut-être que la meilleure solution pour couvrir autant de navigateurs que possible et être à l'épreuve du temps serait
if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")si vous voulez le faire en utilisant un script purement java, 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 fichier popup.js utilisez simplement 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 ");
}
});Le code ci-dessous ajoutera un écouteur pour la ENTERclé sur toute la page.
Cela peut être très utile dans les écrans avec un seul bouton d'action, par exemple se connecter, s'inscrire, 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 la saisie de texte ait été déclenché.
$(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();
});Ce serait bien d'avoir une version plus générale qui a déclenché tous les événements retardés plutôt que de simplement soumettre le formulaire.
Utiliser TypeScript 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
}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"><form id="form1" runat="server" onkeypress="return event.keyCode != 13;">Ajoutez ce code dans votre page HTML ... cela désactivera ... Entrez le bouton ..
<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>Certains navigateurs plus anciens implémentaient les événements de keydown d'une manière non standard.
KeyBoardEvent.key est la façon dont il est censé être implémenté dans les navigateurs modernes.
which
et keyCodesont obsolètes de nos jours, mais cela ne fait pas de mal de vérifier ces événements pour que le code fonctionne pour les utilisateurs qui utilisent toujours des navigateurs plus anciens comme IE.
La isKeyPressedfonction vérifie si la touche enfoncée a été entrée et event.preventDefault()empêche la soumission du formulaire.
if (isKeyPressed(event, 'Enter', 13)) {
event.preventDefault();
console.log('enter was pressed and is prevented');
}JS
function isKeyPressed(event, expectedKey, expectedCode) {
const code = event.which || event.keyCode;
if (expectedKey === event.key || code === expectedCode) {
return true;
}
return false;
}
document.getElementById('myInput').addEventListener('keydown', function(event) {
if (isKeyPressed(event, 'Enter', 13)) {
event.preventDefault();
console.log('enter was pressed and is prevented');
}
});HTML
<form>
<input id="myInput">
</form>