it-swarm-eu.dev

Jquery: comment déclencher un événement lorsque l'utilisateur efface une zone de texte

j'ai une fonction qui travaille actuellement sur l'événement .keypress lorsque l'utilisateur a quelque chose à droite dans la zone de texte, mais il souhaite que le même événement soit déclenché également lorsque l'utilisateur efface la zone de texte. l'utilisateur change le focus sur autre chose 

Merci 

18
trrrrrrm

L’événement keyup détectera si l’utilisateur a également vidé la case correspondante (c’est-à-dire que backspace déclenche l’événement mais que le retour arrière ne déclenche pas l’événement keypress dans IE)

$("#inputname").keyup(function() {

    if (!this.value) {
        alert('The box is empty');
    }

});

jsFiddle

Comme Josh le dit, cela est déclenché pour chaque code de caractère qui est pressé dans l'entrée. Cela indique principalement que vous devez utiliser l'événement keyup pour déclencher un retour arrière, plutôt que l'événement keypress que vous utilisez actuellement.

46
Jonathon Bolster

La solution de Jonathon Bolster ne couvre pas tous les cas. Je l'ai adapté pour couvrir également les modifications par copier-coller:

$("#inputname").on('change keyup copy paste cut', function() {
    //!this.value ...
});

voir http://jsfiddle.net/gonfidentschal/XxLq2/

Malheureusement, il n'est pas possible de saisir les cas où la valeur du champ est définie à l'aide de javascript. Si vous définissez vous-même la valeur, ce n'est pas un problème car vous savez quand vous le faites ... mais lorsque vous utilisez une bibliothèque telle que AngularJS qui met à jour la vue lorsque l'état change, le travail peut être un peu plus long. Ou vous devez utiliser une minuterie pour vérifier la valeur.

Voir aussi la réponse pour Détecter le changement d’entrée dans jQuery? qui suggère l'événement 'input' compris par les navigateurs modernes. Alors juste:

$("#inputname").on('input', function() {
    //!this.value ...
});
17
Gonfi den Tschal

Une autre manière de le faire de manière concise consiste à écouter l'événement "input" sur textarea/input-type: text fields

/**
 * Listens on textarea input.
 * Considers: undo, cut, paste, backspc, keyboard input, etc
 */
$("#myContainer").on("input", "textarea", function() {
    if (!this.value) {

    }
});
1
Rose