Comment empêcher ENTER d'appuyer sur une touche pour soumettre un formulaire Web?
Comment empêchez-vous un ENTER pression sur une touche pour l'envoi d'un formulaire dans une application Web?
[ révision 2012, pas de gestionnaire en ligne, conservez la gestion de la saisie de texte]
function checkEnter(e){
e = e || event;
var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}
Vous pouvez maintenant définir un gestionnaire de frappe sur le formulaire:<form [...] onkeypress = "return checkEnter (event)">
document.querySelector('form').onkeypress = checkEnter;
Voici un gestionnaire jQuery qui peut être utilisé pour arrêter les envois soumis, ainsi que pour arrêter la touche retour arrière -> retour. Les paires (keyCode: selectorString) de l'objet "keyStop" servent à faire correspondre les nœuds qui ne doivent pas déclencher leur action par défaut.
Rappelez-vous que le Web doit être un lieu accessible, ce qui va à l'encontre des attentes des utilisateurs de clavier. Cela dit, dans mon cas, l'application Web sur laquelle je travaille n'aime pas le bouton Précédent de toute façon, aussi la désactivation de son raccourci clavier est correcte. La discussion "devrait entrer -> soumettre" est importante, mais n'est pas liée à la question posée.
Voici le code, à vous de penser à l'accessibilité et pourquoi vous voudriez réellement le faire!
$(function(){
var keyStop = {
8: ":not(input:text, textarea, input:file, input:password)", // stop backspace = back
13: "input:text, input:password", // stop enter = submit
end: null
};
$(document).bind("keydown", function(event){
var selector = keyStop[event.which];
if(selector !== undefined && $(event.target).is(selector)) {
event.preventDefault(); //stop event
}
return true;
});
});
Il suffit de retourner false à partir du gestionnaire onsubmit
<form onsubmit="return false;">
ou si vous voulez un gestionnaire au milieu
<script>
var submitHandler = function() {
// do stuff
return false;
}
</script>
<form onsubmit="return submitHandler()">
//Turn off submit on "Enter" key
$("form").bind("keypress", function (e) {
if (e.keyCode == 13) {
$("#btnSearch").attr('value');
//add more buttons here
return false;
}
});
Vous devrez appeler cette fonction qui annulera simplement le comportement d'envoi par défaut du formulaire. Vous pouvez l'attacher à n'importe quel champ de saisie ou événement.
function doNothing() {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if( keyCode == 13 ) {
if(!e) var e = window.event;
e.cancelBubble = true;
e.returnValue = false;
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
}
La touche ENTRÉE active simplement le bouton de soumission par défaut du formulaire, qui sera le premier
<input type="submit" />
le navigateur trouve dans le formulaire.
Par conséquent, ne pas avoir un bouton d'envoi, mais quelque chose comme
<input type="button" value="Submit" onclick="submitform()" />
EDIT: En réponse à la discussion dans les commentaires:
Cela ne fonctionne pas si vous n'avez qu'un seul champ de texte - mais il se peut que ce soit le comportement souhaité dans ce cas.
L'autre problème est que cela repose sur Javascript pour soumettre le formulaire. Cela peut être un problème du point de vue de l'accessibilité. Cela peut être résolu en écrivant le <input type='button'/> avec javascript, puis en plaçant un <input type='submit' /> dans une balise <noscript>. L'inconvénient de cette approche est que, pour les navigateurs désactivés par javascript, vous aurez ensuite les formulaires à envoyer sur ENTRÉE. Il appartient au PO de décider quel est le comportement souhaité dans ce cas.
Je ne connais aucun moyen de faire cela sans invoquer du tout le javascript.
En bref, la réponse en Javascript pur est:
<script type="text/javascript">
window.addEventListener('keydown', function(e) {
if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
if (e.target.nodeName == 'INPUT' && e.target.type == 'text') {
e.preventDefault();
return false;
}
}
}, true);
</script>
Ceci désactive uniquement l'action "Entrée" pour le type d'entrée = 'texte'. Les visiteurs peuvent toujours utiliser la touche "Entrée" sur tout le site.
Si vous souhaitez également désactiver "Entrée" pour d'autres actions, vous pouvez ajouter console.log (e); Pour vos besoins de test, appuyez sur F12 en chrome, accédez à l'onglet "Console", cliquez sur "retour arrière" sur la page et regardez à l'intérieur pour voir les valeurs renvoyées. Vous pouvez ensuite cibler tous ces paramètres pour améliorer encore le code. ci-dessus selon vos besoins pour "e.target.nodeName" , "e.target.type" et beaucoup d'autres ...
Toutes les réponses que j'ai trouvées à ce sujet, ici ou dans d'autres publications, présentent un inconvénient: elles empêchent également le déclenchement du changement sur l'élément de formulaire. Ainsi, si vous exécutez ces solutions, l'événement onchange n'est pas déclenché également. Pour surmonter ce problème, j'ai modifié ces codes et développé le code suivant pour moi-même. J'espère que cela deviendra utile pour les autres. J'ai donné une classe à mon formulaire "prevent_auto_submit" et ajouté le code JavaScript suivant:
$(document).ready(function()
{
$('form.prevent_auto_submit input,form.prevent_auto_submit select').keypress(function(event)
{
if (event.keyCode == 13)
{
event.preventDefault();
$(this).trigger("change");
}
});
});
Je l'ai toujours fait avec un gestionnaire de frappe comme ci-dessus, mais aujourd'hui, nous avons opté pour une solution plus simple. La touche Entrée déclenche simplement le premier bouton d'envoi non désactivé du formulaire. Il suffit donc d'intercepter ce bouton pour le soumettre:
<form>
<div style="display: none;">
<input type="submit" name="prevent-enter-submit" onclick="return false;">
</div>
<!-- rest of your form markup -->
</form>
C'est ça. Les touches de commande seront traitées normalement par le navigateur/les champs/etc. Si la logique de saisie-soumission est déclenchée, le navigateur trouvera ce bouton de soumission masqué et le déclenchera. Et le gestionnaire javascript empêchera alors la soumission.
J'ai passé du temps à créer ce navigateur croisé pour IE8,9,10, Opera 9+, Firefox 23, Safari (PC) et Safari (MAC).
Exemple JSFiddle: http://jsfiddle.net/greatbigmassive/ZyeHe/
Code de base - Appelez cette fonction via "onkeypress" jointe à votre formulaire et transmettez-lui "window.event".
function stopEnterSubmitting(e) {
if (e.keyCode == 13) {
var src = e.srcElement || e.target;
if (src.tagName.toLowerCase() != "textarea") {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
}
}
stopSubmitOnEnter (e) {
var eve = e || window.event;
var keycode = eve.keyCode || eve.which || eve.charCode;
if (keycode == 13) {
eve.cancelBubble = true;
eve.returnValue = false;
if (eve.stopPropagation) {
eve.stopPropagation();
eve.preventDefault();
}
return false;
}
}
Puis sur votre formulaire:
<form id="foo" onkeypress="stopSubmitOnEnter(e);">
Cependant, il serait préférable que vous n'utilisiez pas de JavaScript intrusif.
Dans mon cas, ce JavaScript jQuery a résolu le problème
jQuery(function() {
jQuery("form.myform").submit(function(event) {
event.preventDefault();
return false;
});
}
Pour empêcher l'envoi du formulaire lorsque vous appuyez sur enter Dans un champ textarea ou input, consultez l'événement submit pour rechercher le type d'élément qui a envoyé l'événement.
Exemple 1
HTML
<button type="submit" form="my-form">Submit</button>
<form id="my-form">
...
</form>
jQuery
$(document).on('submit', 'form', function(e) {
if (e.delegateTarget.activeElement.type!=="submit") {
e.preventDefault();
}
});
Une meilleure solution est de ne pas avoir de bouton d'envoi et de déclencher l'événement avec un bouton normal. Il est préférable que, dans le premier exemple, 2 événements de soumission soient déclenchés, mais dans le deuxième exemple, un seul événement de soumission est déclenché.
Exemple 2
HTML
<button type="button" onclick="$('#my-form').submit();">Submit</button>
<form id="my-form">
...
</form>
jQuery
$(document).on('submit', 'form', function(e) {
if (e.delegateTarget.activeElement.localName!=="button") {
e.preventDefault();
}
});
Vous trouverez cela plus simple et utile: D
$(document).on('submit', 'form', function(e){
/* on form submit find the trigger */
if( $(e.delegateTarget.activeElement).not('input, textarea').length == 0 ){
/* if the trigger is not between selectors list, return super false */
e.preventDefault();
return false;
}
});
Empêcher "ENTRER" de soumettre le formulaire peut gêner certains de vos utilisateurs. Il serait donc préférable que vous suiviez la procédure ci-dessous:
Ecrivez l'événement 'onSubmit' dans votre balise de formulaire:
<form name="formname" id="formId" onSubmit="return testSubmit()" ...>
....
....
....
</form>
écrire la fonction Javascript comme suit:
function testSubmit(){
if(jQuery("#formId").valid())
{
return true;
}
return false;
}
(OR)
Quelle que soit la raison, si vous souhaitez empêcher la soumission du formulaire en appuyant sur la touche Entrée, vous pouvez écrire la fonction suivante en javascript:
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
merci.
Ajoutez cette balise à votre formulaire - onsubmit="return false;" Ensuite, vous ne pouvez soumettre votre formulaire qu’avec une fonction JavaScript.
S'il vous plaît vérifier cet article Comment empêcher ENTER appuyez sur pour soumettre un formulaire Web?
$(“.pc_prevent_submit”).ready(function() {
$(window).keydown(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class=”pc_prevent_submit” action=”” method=”post”>
<input type=”text” name=”username”>
<input type=”password” name=”userpassword”>
<input type=”submit” value=”submit”>
</form>Que diriez-vous:
<asp:Button ID="button" UseSubmitBehavior="false"/>
Ce lien fournit une solution qui a fonctionné pour moi dans Chrome, FF et IE9, ainsi que l'émulateur pour IE7 et 8 fourni avec l'outil de développement d'IE9 (F12).
Que diriez-vous:
<script>
function isok(e) {
var name = e.explicitOriginalTarget.name;
if (name == "button") {
return true
}
return false;
}
</script>
<form onsubmit="return isok(event);">
<input type="text" name="serial"/>
<input type="submit" name="button" value="Create Thing"/>
</form>
Et nommez simplement votre bouton à droite et il sera toujours soumis, mais les champs de texte, c’est-à-dire le explicitOriginalTarget lorsque vous cliquerez sur return dans un, n’auront pas le bon nom.
Je suis tombé sur cette erreur moi-même parce que j'ai plusieurs boutons de soumission avec des valeurs de 'nom' différentes, de sorte qu'ils effectuent différentes tâches dans le même fichier php. Le bouton enter/return interrompt cette opération car ces valeurs ne sont pas soumises. Je me suis donc demandé si le bouton enter/return activait le premier bouton d'envoi du formulaire. De cette façon, vous pourriez avoir un bouton d'envoi 'Vanilla' qui est caché ou qui a une valeur 'name' qui renvoie le fichier php en cours d'exécution à la page contenant le formulaire. Ou bien une valeur par défaut (masquée) de "nom" que le clavier appuie, et les boutons de soumission écrasent leurs propres valeurs de "nom". Juste une pensée.
Une autre approche consiste à ajouter le bouton de saisie de la soumission au formulaire uniquement lorsqu'il est censé être soumis et à le remplacer par une simple div lors du remplissage du formulaire.
Ajoutez simplement cet attribut à votre balise FORM:
onsubmit="return gbCanSubmit;"
Ensuite, dans votre tag SCRIPT, ajoutez ceci:
var gbCanSubmit = false;
Ensuite, lorsque vous créez un bouton ou pour toute autre raison (comme dans une fonction), vous autorisez enfin une soumission, retournez simplement le booléen global et effectuez un appel .submit (), similaire à cet exemple:
function submitClick(){
// error handler code goes here and return false if bad data
// okay, proceed...
gbCanSubmit = true;
$('#myform').submit(); // jQuery example
}
Vous pouvez intercepter la saisie sur un formulaire en javascript et empêcher le bouillonnement, à mon avis. ENTRER sur une page Web ne fait que soumettre le formulaire dans lequel le contrôle actuellement sélectionné est placé.
Cela a fonctionné pour moi.
onkeydown = "return! (event.keyCode == 13)"
<form id="form1" runat="server" onkeydown="return !(event.keyCode==13)">
</form>