Capture d'un événement clé pour le retour arrière

Question

J'ai des difficultés à capturer la touche de retour arrière en tant qu'événement clavier en javascript/jQuery. Dans Firefox, Safari, Opera, Chrome, et sur l'iPhone/iPad, je capture un événement keyup sur une zone de saisie de texte comme celui-ci:

$(id_input).keyup(function(event) { 
    that.GetHints($(this).val().trim(), event, fieldName); 
}); 

Cet événement capture les frappes de l'utilisateur, puis les envoie à une fonction d'émettre un appel de recherche ajax.

Mon problème survient lorsqu'un utilisateur souhaite revenir en arrière sur un caractère qu'il a déjà tapé. Dans tous les navigateurs auxquels j'accède à l'exception de mon téléphone Droid, lorsque j'appuie sur la touche de retour arrière, cet événement keyup capture la valeur renvoyée par $ (this) .val(). Trim() et l'envoie à la fonction GetHints. Sur le Droid, cependant, ni ce keyup ni un événement de keydown équivalent ne se déclenche tant que l'utilisateur ne fait pas de retour arrière sur chaque caractère dans $ (this). Donc, par exemple, si je tape "cu" alors retour arrière sur le "u" en laissant seulement "c" dans le champ de saisie, dans tous les navigateurs sauf Droid, l'événement de touche se déclenchera et appellera la fonction GetHints("c", event, fieldName). Sur le Droid, l'événement keyup ne se déclenche jamais.

Qu'est-ce qui me manque? Comment/pourquoi cette touche d'effacement arrière, sur le clavier logiciel ou le clavier dur, sur mon Droid ne fonctionne-t-elle pas comme prévu? Comment est-ce que je travaille autour de ceci?

Answer 1

Vous pouvez rechercher des modifications dans le texte (en utilisant setInterval). Ce serait probablement plus fiable. Par exemple, le fichier ne se déclencherait pas si l'utilisateur clique avec le bouton droit de la souris -> couper. Le sondage seul serait moins réactif, mais vous pourriez le combiner avec le clavier pour le garder accrocheur. L'interrogation serait un peu plus lourde.

Essayez quelque chose le long de ces lignes:

var oldText = ''; 
var timer = setInterval(function(){ 
    var text = $(id_input).val().trim(); 
    if(text != oldText){ 
     oldText = text; 
     that.GetHints(text, fieldName); 
    } 
}, 500); 

Tweak la durée de l'intervalle nécessaire. Je ne sais pas ce que that.GetHints fait avec event, mais évidemment, vous ne seriez pas en mesure de transmettre cela en utilisant l'approche d'interrogation (parce qu'il n'y a pas un événement réel étant déclenché). Est-ce un problème?

Vous pouvez utiliser clearInterval(timer); pour arrêter l'interrogation si vous le souhaitez.

Vous pouvez conserver votre fonction de clavier existante telle quelle (pour augmenter la réactivité). Alternativement, vous pouvez simplement interroger pour éviter d'être trop appelé (par exemple si quelqu'un tape quelque chose très rapidement).