Lors de la modification d'une entrée de texte, comment effectuer une action JavaScript spécifique en appuyant sur la touche "Entrée" sans le gestionnaire onSubmit du formulaire?

J'ai un champ de texte HTML input.Lors de la modification d'une entrée de texte, comment effectuer une action JavaScript spécifique en appuyant sur la touche "Entrée" sans le gestionnaire onSubmit du formulaire?

Comment puis-je effectuer un appel JavaScript spécifique en appuyant sur le bouton "Entrée" lors de la modification de ce champ? Actuellement, appuyer sur "Entrée" recharge la page entière, vraisemblablement en raison de la soumission du formulaire entier.

REMARQUE: ce code HTML/JS est simplement inclus en tant que portlet dans une page HTML volumineuse pour un portail, avec un grand formulaire principal enveloppé tout autour de mon code. Par conséquent Je ne peux pas contrôler la forme - ne peut pas changer l'événement onSubmit ou action ou envelopper mon champ INPUT dans une forme plus petite - sinon la solution serait évidente :)

En outre, une solution qui ne nécessite pas l'ajout d'un visible bouton au formulaire est fortement préférable (je ne me dérange pas d'ajouter un bouton avec display:hidden si c'est ce qu'il faut, mais ma tentative de le faire n'a pas l'air de fonctionner).

Ceci doit être direct JS - aucune requête/prototype/YUI n'est disponible.

P.S. c'est un champ de recherche et l'action sera un appel à une méthode de recherche JavaScript sur une page existante, si quelqu'un est curieux.

Merci!

Source

2009-10-27 DVK

En supposant que vous avez quelque chose d'entrée de texte comme

<input id="myTextBox" name="foo" value="bar">

... vous pourriez faire quelque chose comme ça, après que le document a été chargé, et il fonctionnera dans tous les navigateurs principaux:

Source

2009-10-27 23:50:30

Inclure le javascript suivant

<script type="text/javascript"> 
function noenter() { 
    return !(window.event && window.event.keyCode == 13); 
} 
</script>

Ajoutez l'attribut suivant dans l'élément d'entrée que vous souhaitez éviter le soumettre

onkeypress="return noenter()"

Bien sûr, vous pouvez effectuer un autre événement si vous le souhaitez ..

Source

2009-10-27 19:48:51 Buggabill

+1 - Cela a parfaitement fonctionné dans les tests initiaux - Merci! Si aucune meilleure solution (d'un point de vue esthétique) n'est présentée dans 2 jours, je l'accepterai (rien de personnel, je déteste vraiment vraiment capturer des keyclicks comme ça :) – DVK

Je ne le prends pas personnellement. S'il y a une meilleure solution, j'aimerais la voir aussi, car finalement, la convivialité est ce que vous recherchez. – Buggabill

Cela ne fonctionne pas dans Firefox, pour Firefox, vous devez utiliser var keyCode = event.keyCode? event.keyCode: event.which, puis teste keyCode var. – Cesar

-1

Serait-il préférable d'utiliser l'objet document pour détecter l'action Entrée? De cette façon, vous n'avez pas besoin de modifier les balises de formulaire HTML. Vous pouvez assigner la fonction de recherche au bouton, bien que s'il est caché, je ne suis pas sûr de la façon dont l'utilisateur cliquera dessus, ou vous pourriez utiliser quelque chose comme onblur pour capturer l'utilisateur tabulant hors du contrôle d'entrée.

Source

2009-10-27 19:58:46

-1

Essayez d'ajouter un attribut "action = javascript: void (0)" comme dans l'exemple ci-dessous. Entrer déclenchera la même action en cliquant sur le bouton Envoyer, mais ne rechargera pas automatiquement la page.

<html> 
<head></head> 
<body> 
    <div id="status"></div> 
    <form action="javascript:void(0)"> 
     <input type="text" /> 
     <input type="submit" value="submit" onclick="document.getElementById('status').innerHTML = 'submitted';"/> 
    </form> 
    <script>document.getElementById('status').innerHTML = 'page loaded';</script> 
</body> 
</html>

Source

2009-10-27 21:22:47 Mic

Comme indiqué dans la question, je ne contrôle pas le texte HTML du formulaire, donc cela ne peut pas être fait. – DVK

sûr, mais avec javascript, je suppose que vous pouvez le contrôler – Mic

Lors de la modification d'une entrée de texte, comment effectuer une action JavaScript spécifique en appuyant sur la touche "Entrée" sans le gestionnaire onSubmit du formulaire?

Répondre

Questions connexes