Utilisez Javascript pour changer qui soumettre est activé sur la touche enter press
j'ai un formulaire sur une page HTML avec plusieurs boutons soumettre qui effectuent des actions différentes. Cependant, lorsque l'utilisateur tape une valeur dans une entrée de texte et qu'il appuie sur ENTRÉE, les navigateurs agissent généralement comme si le bouton Soumettre suivant était activé de façon séquentielle. Je veux qu'une action particulière se produise, donc une solution que j'ai trouvée était de mettre dans les boutons invisibles submit dans le HTML directement après les entrées de texte en question, comme ceci:
<input type="text" name="something" value="blah"/>
<input type=submit name="desired" value="Save Earth" style="display: none"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />
Cela fonctionne comme un charme en plus navigateurs, sauf qu'il ne fait pas dans les navigateurs webkit comme Safari et Chrome. Pour une raison quelconque, ils sautent sur le bouton Soumettre invisible. J'ai essayé de trouver comment intercepter la touche Entrée et activer la soumission appropriée en utilisant Javascript, mais je n'ai pas été en mesure de le faire fonctionner. Intercepter le keydown et mettre l'accent sur la soumission appropriée ne fonctionne pas.
Existe-t-il un moyen D'utiliser Javascript ou autre pour sélectionner le bouton Soumettre qui sera utilisé lorsque le l'utilisateur tape la touche entrée dans un texte saisi sur un formulaire HTML?
Modifier: pour clarifier, le formulaire ne peut pas exiger Javascript pour "travailler" fondamentalement. Je ne me soucie pas si la soumission de la clé enter est indésirable sans Javascript sur les navigateurs webkit, mais je ne peux pas supprimer ou modifier l'ordre des boutons soumettre.
C'est ce que j'ai essayé, ça ne change pas le comportement de soumission dans les navigateurs webkit.
Ce qui a fonctionné est de changer la focus () dans le code suivant cliquez sur().
document.onkeypress = processKey;
function processKey(e)
{
if (null == e)
e = window.event ;
if (e.keyCode == 13) {
document.getElementById("foobar").click(); // previously: focus()
}
}
EDIT: FINAL SOLUTION:
Fonctionne avec tous les navigateurs et seulement intercepte la touche entrée lorsque nécessaire:
HTML:
<input type="text" name="something" value="blah"
onkeydown="return processKey(event)" />
<input type=submit name="desired" value="Save Earth" style="display: none"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />
Javascript:
function processKey(e)
{
if (null == e)
e = window.event ;
if (e.keyCode == 13) {
document.getElementById("foobar").click();
return false;
}
}
6 réponses
une façon serait de supprimer tous les boutons soumettre et utiliser les boutons d'entrée pour soumettre le formulaire de façon programmatique. Cela supprimerait la possibilité de soumettre le formulaire en appuyant sur la touche enter dans une zone de texte. Vous pouvez également laisser un bouton Soumettre comme la fonctionnalité par défaut soumettre, et utiliser des entrées de bouton réguliers pour les autres et soumettre le formulaire de manière programmatique.
l'erreur évidente est que les utilisateurs devraient activer JavaScript. Si ce n'est pas un problème c'est une considération pour vous.
EDIT:
ici, j'ai essayé de faire un exemple pour vous en utilisant jQuery (la même fonctionnalité peut facilement être créée sans jQuery)... laissez-moi savoir si cela aide...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
$("#f input").filter(":text").keydown( function(event) {
if (event.keyCode==13) {
$(this).nextAll().eq(0).click();
}
});
});
//--></script>
</head>
<body>
<form name="f" id="f">
<input type="text" id="t1" name="t1" /><input type="button" id="b1" name="b1" value="button-one" onclick="alert('clicked enter on textbox 1');" /><br />
<input type="text" id="t2" name="t2" /><input type="button" id="b2" name="b2" value="button-two" onclick="alert('clicked enter on textbox 2');" /><br />
<input type="text" id="t3" name="t3" /><input type="button" id="b3" name="b3" value="button-three" onclick="alert('clicked enter on textbox 3');" /><br />
</form>
</body>
</html>
l'action de soumission par défaut invisible est une approche raisonnable et ne fait pas glisser JavaScript dans l'équation. Cependant, les éléments de forme avec 'display: none' ne sont généralement pas fiables. J'ai tendance à utiliser un bouton submit absolument-positionné avant les autres sur la page, positionné du côté gauche de la page. C'est encore moche, mais ça fait le boulot.
Que Diriez-vous d'utiliser CSS? Vous pouvez juste régler le premier bouton, votre bouton par défaut en dehors de la zone visible de l'écran avec un "position: absolute; left: -200px; top: -200px;". Autant que je me souvienne, il ne sera ignoré par aucun navigateur, parce qu'il n'est pas invisible. Cela fonctionne bien:
<form method="get">
<input type="text" name="something" value="blah"/>
<input type=submit name="desired" value="Save Earth"
style="position: absolute; left: -200px; top: -200px;"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />
</form>
Et la terre est sauvé ...
il suffit de contrôler l'événement de presse clé. mettez onKeyPress dans la balise de corps
onkeypress=CheckKeyPress()
puis gérer la touche Entrée
function CheckKeyPress(){
var code;
if(!e) var e = window.event;
if(e.keyCode){
code = e.keyCode;
}else if(e.which){
code = e.which;
}
if(code == 13){
//Do Something
}
}
Ne pas intercepter le keydown événement, d'intercepter l' submit événement.
donc:
form.onsubmit = function(e){
// Do stuff. Change the form's action or method maybe.
return true;
}
Qu'en est-il de l'utilisation de formulaires distincts? Peut-être que je manque quelque chose qui rend cela impossible :P