Soumettre un formulaire sur 'Entrer' avec jQuery?
J'ai un formulaire de connexion standard - un champ de texte d'e-mail, un champ de mot de passe et un bouton d'envoi sur un projet AIR utilisant HTML/jQuery. Lorsque j'appuie sur la touche Entrée du formulaire, tout le contenu du formulaire disparaît, mais le formulaire n'est pas soumis. Est-ce que quelqu'un sait s'il s'agit d'un problème de Webkit (Adobe AIR utilise Webkit pour HTML) ou si j'ai bloqué des choses?
J'ai essayé:
$('.input').keypress(function (e) {
if (e.which == 13) {
$('form#login').submit();
}
});
Mais cela n'a pas non plus arrêté le comportement de nettoyage, ni soumis le formulaire. Aucune action n'est associée au formulaire - cela pourrait-il être le problème? Puis-je mettre une fonction javascript dans l'action?
$('.input').keypress(function (e) {
if (e.which == 13) {
$('form#login').submit();
return false; //<---- Add this line
}
});
REMARQUE: vous avez accepté la réponse de bendewey, mais sa description de e.preventDefault () est incorrecte. Découvrez cette réponse stackoverflow: event.preventDefault () vs. return false
"Return false" revient essentiellement à appeler e.preventDefault et e.stopPropagation().
En plus de renvoyer faux comme Jason Cohen l'a mentionné. Vous devrez peut-être aussi prévenir Défaut
e.preventDefault();
Je ne sais pas si cela vous aidera, mais vous pouvez essayer de simuler un clic du bouton de soumission au lieu de soumettre directement le formulaire. J'ai le code suivant en production, et cela fonctionne très bien:
$('.input').keypress(function(e) {
if(e.which == 13) {
jQuery(this).blur();
jQuery('#submit').focus().click();
}
});
Remarque: jQuery ('# submit'). Focus () anime le bouton lorsque vous appuyez sur Entrée.
Retournez false pour empêcher la frappe de continuer.
Y a-t-il une raison pour laquelle vous devez accrocher et tester la touche Entrée?
Pourriez-vous simplement ajouter un
<input type="submit" />
à votre formulaire et le faire naturellement être soumis lorsque enter est poussé? Vous pouvez même ensuite associer l'action onsubmit du formulaire et appeler une fonction de validation à partir de là si vous le souhaitez ...
Vous pouvez même utiliser la onsubmit comme test pour voir si votre formulaire est soumis, mais cela ne fonctionnera pas si vous appelez form.submit().
Voici un moyen de faire cela en tant que plugin JQuery (au cas où vous voudriez réutiliser la fonctionnalité):
$.fn.onEnterKey =
function( closure ) {
$(this).keypress(
function( event ) {
var code = event.keyCode ? event.keyCode : event.which;
if (code == 13) {
closure();
return false;
}
} );
}
Maintenant, si vous voulez décorer avec ce type de fonctionnalité, c'est aussi simple que cela:
$('#your-input-id').onEnterKey(
function() {
// Do stuff here
} );
Vous pouvez également simplement ajouter onsubmit="return false" au code du formulaire dans la page pour empêcher le comportement par défaut.
Reliez ensuite (.bind ou .live) l'événement submit du formulaire à toute fonction avec jQuery dans le fichier javascript.
Voici un exemple de code pour vous aider:
HTML
<form id="search_form" onsubmit="return false">
<input type="text" id="search_field"/>
<input type="button" id="search_btn" value="SEARCH"/>
</form>
Javascript + jQuery
$(document).ready(function() {
$('#search_form').live("submit", function() {
any_function()
});
});
Cela fonctionne à partir de 2011-04-13, avec Firefox 4.0 et jQuery 1.4.3
Ceci est mon code:
$("#txtMessage").on( "keypress", function(event) {
if (event.which == 13 && !event.shiftKey) {
event.preventDefault();
$("#frSendMessage").submit();
}
});
Également pour maintenir l'accessibilité, vous devriez utiliser ceci pour déterminer votre code de clé:
c = e.which ? e.which : e.keyCode;
if (c == 13) ...
Il suffit d'ajouter pour une mise en œuvre facile. Vous pouvez simplement créer un formulaire puis masquer le bouton d'envoi:
Par exemple:
<form action="submit.php" method="post">
Name : <input type="text" name="test">
<input type="submit" style="display: none;">
</form>
Je l'utilise maintenant
$("form").submit(function(event)
Au début, j'ai ajouté un gestionnaire d'événements au bouton d'envoi, ce qui m'a causé une erreur.
J'ai découvert aujourd'hui que l'événement de frappe n'est pas déclenché lorsque vous appuyez sur la touche Entrée. Vous souhaiterez donc peut-être basculer sur keydown () ou keyup ().
Mon script de test:
$('.module input').keydown(function (e) {
var keyCode = e.which;
console.log("keydown ("+keyCode+")")
if (keyCode == 13) {
console.log("enter");
return false;
}
});
$('.module input').keyup(function (e) {
var keyCode = e.which;
console.log("keyup ("+keyCode+")")
if (keyCode == 13) {
console.log("enter");
return false;
}
});
$('.module input').keypress(function (e) {
var keyCode = e.which;
console.log("keypress ("+keyCode+")");
if (keyCode == 13) {
console.log("Enter");
return false;
}
});
La sortie dans la console lorsque vous tapez "A Enter B" sur le clavier:
keydown (65)
keypress (97)
keyup (65)
keydown (13)
enter
keyup (13)
enter
keydown (66)
keypress (98)
keyup (66)
Vous voyez dans la deuxième séquence l'absence de 'touche', mais le code '13' du clavier 'Keydown' et du keyup est enfoncé/relâché. Selon documentation jQuery sur la fonction keypress () :
Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.
Testé sur IE11 et FF61 sur Server 2012 R2
En codes HTML:
<form action="POST" onsubmit="ajax_submit();return false;">
<b>First Name:</b> <input type="text" name="firstname" id="firstname">
<br>
<b>Last Name:</b> <input type="text" name="lastname" id="lastname">
<br>
<input type="submit" name="send" onclick="ajax_submit();">
</form>
En codes Js:
function ajax_submit()
{
$.ajax({
url: "submit.php",
type: "POST",
data: {
firstname: $("#firstname").val(),
lastname: $("#lastname").val()
},
dataType: "JSON",
success: function (jsonStr) {
// another codes when result is success
}
});
}