Maison >interface Web >js tutoriel >Comment puis-je exécuter JavaScript uniquement après qu'un utilisateur a fini de taper dans une zone de texte ?

Comment puis-je exécuter JavaScript uniquement après qu'un utilisateur a fini de taper dans une zone de texte ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-03 00:31:15931parcourir

How Can I Execute JavaScript Only After a User Finishes Typing in a Text Box?

Exécuter JavaScript à la fin de la saisie par l'utilisateur

Problème :

Détecter lorsqu'un utilisateur termine de taper dans une zone de texte sans déclencher une action à chaque frappe. Cela vise à minimiser les requêtes AJAX inutiles tout en évitant d'avoir à appuyer sur le bouton Entrée.

Solution :

Pour déterminer quand un utilisateur a fini de taper, un minuteur Une approche peut être employée. Voici comment cela fonctionne avec jQuery :

  1. Démarrer un minuteur lors de la libération d'une clé : lorsque l'utilisateur relâche une clé, déclenchez un minuteur pour attendre une durée définie (par exemple, 5 secondes ).
  2. Effacer le minuteur en appuyant sur une touche : Si l'utilisateur appuie sur une autre touche avant le minuteur expire, effacez le minuteur existant.
  3. Exécuter à la fin du délai : lorsque le minuteur expire sans aucune autre pression sur une touche, il indique la fin de la saisie. Exécutez l'action prévue, telle qu'une requête AJAX.

Voici un exemple de code :

// Setup variables
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 seconds for example
var $input = $('#myInput');

// Keyup: Start Timer
$input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

// Keydown: Clear Timer
$input.on('keydown', function () {
  clearTimeout(typingTimer);
});

// Typing Completion: Execute Action
function doneTyping () {
  // Perform the intended action, e.g., AJAX request
}

En mettant en œuvre cette approche, vous pouvez optimiser les performances des requêtes AJAX en réduisant leur fréquence sans avoir besoin d’une entrée supplémentaire de l’utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn