Evénement de saisie de texte HTML

Question

J'ai un formulaire et je souhaite désactiver/activer son bouton de soumission selon que les champs de saisie du formulaire sont vides ou que du texte y a été entré. Je pense que cela signifie avoir un gestionnaire d'événements pour les champs de texte keydown ou keypress: lorsqu'il est déclenché, ce gestionnaire d'événements doit vérifier si les champs de texte d'entrée contiennent du texte et activer ou désactiver le bouton d'envoi en conséquence.

L'événement change semble que cela devrait être plus utile que les événements keydown ou keypress, sauf qu'il ne se déclenche pas jusqu'à ce que le contrôle en question perd le focus, et ce bien est que: puisque l'utilisateur veut juste tapez quelque chose, puis cliquez sur le bouton soumettre, je veux un gestionnaire d'événements qui est tiré par le texte étant entré et non seulement lorsque le contrôle perd le focus.

Mes questions sont les suivantes:

• sont-keydown et/ou keypress événements déclenchés avant ou après le texte correspondant a été inséré dans le champ de saisie de texte?
• Les événements keydown et/ou keypress sont-ils annulables (pouvez-vous les annuler pour empêcher la saisie du texte correspondant)?

---

Edit: Pour votre information, les tests de re-jQuery validation plug-in forment la validité sur place clé.

Answer 1

En réponse à vos questions ...

1. Le keydown ou les événements peuvent keypress être interceptés avant le texte est entrée en utilisant javascript
2. Vous pouvez retourner false après la liaison d'une fonction au keydown ou keypress événement. Cela empêchera l'entrée du texte .

Exemple avec jQuery:

$("#inputfield").live("keydown", function(){ 
    return false; 
}); 

Si vous voulez tester une entrée pour la valeur sur le formulaire que vous soumettez pouvez le faire en utilisant jQuery submit().

$("#theform").submit(function() { 
    var formval = $("#theinput").val(); 
    if(formval == "") { //or some better test 
     alert("input value"); //or some other alert... 
     return false; 
    } else { 
     return true; 
    } 
}); 

Le retour de false invalidera le clic pour soumettre le formulaire.

Edit: Si comme vous le dites dans vos commentaires que vous souhaitez désactiver la présentation du formulaire jusqu'à ce que ces exigences sont remplies pour le champ d'entrée (s)

$("#inputfield").live("keyup", function(){ 
    if($("#inputfield").val() == "") { 
     $('#button').attr("disabled", true); 
    } else { 
     $('#button').attr("disabled", false); 
    } 
}); 

Vous voulez utiliser le "keyup "gestionnaire d'événements pour permettre l'envoi du texte en premier.Voir mon exemple: on jsbin