Je veux déclencher une demande ajax lorsque l'utilisateur a fini de taper dans une zone de texte. Je ne veux pas qu'il exécute la fonction à chaque fois que l'utilisateur tape une lettre car cela entraînerait BEAUCOUP de demandes ajax, mais je ne veux pas non plus qu'ils aient à appuyer sur le bouton Entrée.
Existe-t-il un moyen pour que je puisse détecter quand l'utilisateur a fini de taper et ensuite faire la demande ajax?
Utiliser jQuery ici! Dave
javascript
jquery
keyboard
David Zorychta
la source
la source
Réponses:
Donc, je suppose que terminer la saisie signifie que vous vous arrêtez juste pendant un certain temps, disons 5 secondes. Donc, avec cela à l'esprit, permet de démarrer un minuteur lorsque l'utilisateur relâche une touche et de l'effacer lorsqu'il appuie sur une. J'ai décidé que l'entrée en question serait #myInput.
Faire quelques hypothèses ...
la source
doneTyping
dans l'exemple, s'exécute immédiatement. C'est généralement le résultat de l'inclusion accidentelle()
après le nom de la fonction. Notez qu'il ne fautsetTimeout(doneTyping,
pas liresetTimeout(doneTyping(),
La réponse choisie ci-dessus ne fonctionne pas.
Étant donné que typingTimer est parfois défini plusieurs fois (la pression sur la touche deux fois avant le déclenchement de la touche pour les tapeurs rapides, etc.), elle ne s'efface pas correctement.
La solution ci-dessous résout ce problème et appellera X secondes après la fin de l'opération demandée. Il ne nécessite également plus la fonction redondante de keydown. J'ai également ajouté une vérification pour que votre appel de fonction ne se produise pas si votre entrée est vide.
Et le même code dans la solution JavaScript vanilla:
Cette solution utilise ES6 mais elle n'est pas nécessaire ici. Remplacez simplement
let
parvar
et la fonction flèche par une fonction régulière.la source
$('#myInput').on('input', function() {
si vous voulez que cela fonctionne avec le copier-coller. Je ne vois pas l'intérêt de la vérification si l'entrée est vide. Supposons qu'il veuille effacer ce qu'il a tapé, cela ne fera pas l'appel ajax.if ($('#myInput').val)
lieu deif ($('#myInput').val())
? Devrait.val
être une fonction?C'est juste une ligne avec la fonction anti-rebond underscore.js :
Cela dit essentiellement doSomething 500 millisecondes après que j'arrête de taper.
Pour plus d'informations: http://underscorejs.org/#debounce
la source
Uncaught ReferenceError: _ is not defined
Oui, vous pouvez définir un délai de disons 2 secondes sur chaque événement de touche qui déclenchera une demande ajax. Vous pouvez également stocker la méthode XHR et l'abandonner lors d'événements de pression de touche ultérieurs afin d'économiser encore plus de bande passante. Voici quelque chose que j'ai écrit pour un de mes scripts de saisie semi-automatique.
J'espère que cela t'aides,
Marko
la source
exemple complet ici: http://jsfiddle.net/ZYXp4/8/
la source
Les deux principales réponses ne fonctionnent pas pour moi. Voici donc ma solution:
la source
J'aime la réponse de Surreal Dream, mais j'ai trouvé que ma fonction "doneTyping" se déclencherait pour chaque pression de touche, c'est-à-dire si vous tapez "Bonjour" très rapidement; au lieu de tirer une seule fois lorsque vous arrêtez de taper, la fonction se déclenche 5 fois.
Le problème était que la fonction javascript setTimeout ne semble pas écraser ou tuer les anciens délais d'expiration qui ont été définis, mais si vous le faites vous-même, cela fonctionne! Je viens donc d'ajouter un appel clearTimeout juste avant le setTimeout si le typingTimer est défini. Voir ci-dessous:
NB J'aurais aimé ajouter ceci en tant que commentaire à la réponse de Surreal Dream mais je suis un nouvel utilisateur et je n'ai pas assez de réputation. Désolé!
la source
Modification de la réponse acceptée pour gérer des cas supplémentaires tels que la pâte:
la source
Je ne pense pas que l'événement keyDown soit nécessaire dans ce cas (veuillez me dire pourquoi si je me trompe). Dans mon script (non jquery), une solution similaire ressemble à ceci:
C'est ma première réponse sur Stack Overflow, donc j'espère que cela aidera quelqu'un, un jour :)
la source
Déclarez la
delay
fonction suivante :puis l'utiliser:
la source
Réponse tardive mais je l'ajoute parce que c'est 2019 et c'est entièrement réalisable en utilisant la jolie ES6, pas de bibliothèques tierces, et je trouve que la plupart des réponses très cotées sont volumineuses et alourdies avec trop de variables.
Solution élégante tirée de cet excellent article de blog.
la source
Eh bien, à proprement parler non, car l'ordinateur ne peut pas deviner quand l'utilisateur a fini de taper. Vous pouvez bien sûr déclencher une minuterie à la clé et la réinitialiser à chaque touche suivante. Si la minuterie expire, l'utilisateur n'a pas tapé pendant la durée de la minuterie - vous pourriez appeler cela "fini de taper".
Si vous vous attendez à ce que les utilisateurs fassent des pauses lors de la frappe, il n'y a aucun moyen de savoir quand ils ont terminé.
(À moins bien sûr que vous puissiez dire à partir des données quand elles sont terminées)
la source
J'ai l'impression que la solution est un peu plus simple avec l'
input
événement:la source
d'accord avec la réponse de @going. Une autre solution similaire qui a fonctionné pour moi est celle ci-dessous. La seule différence est que j'utilise .on ("input" ...) au lieu de keyup. Cela capture uniquement les changements dans l'entrée. les autres touches comme Ctrl, Shift etc. sont ignorées
la source
Je viens de trouver un code simple pour attendre que l'utilisateur ait fini de taper:
Étape 1: définissez le délai d'expiration sur null, puis effacez le délai d'expiration actuel lorsque l'utilisateur tape.
Étape 2: déclenchez un délai d'expiration clair pour la variable définir avant que l'événement de keyup ne soit déclenché
étape 3. définir le délai d'expiration de la variable déclarée ci-dessus;
code javascript
la source
J'implémentais la recherche sur ma fiche et j'avais besoin qu'elle soit basée sur ajax. Cela signifie qu'à chaque changement de clé, les résultats de recherche doivent être mis à jour et affichés. Cela se traduit par autant d'appels ajax envoyés au serveur, ce qui n'est pas une bonne chose.
Après quelques travaux, j'ai fait une approche pour envoyer une requête ping au serveur lorsque l'utilisateur arrête de taper.
Cette solution a fonctionné pour moi:
Vous remarquerez qu'il n'est pas nécessaire d'utiliser un minuteur lors de l'implémentation.
la source
Voici le code JS simple que j'ai écrit:
la source
Vous pouvez utiliser l'événement onblur pour détecter le moment où la zone de texte perd le focus: https://developer.mozilla.org/en/DOM/element.onblur
Ce n'est pas la même chose que "arrête de taper", si vous vous souciez du cas où l'utilisateur tape un tas de trucs et reste assis là avec la zone de texte toujours focalisée.
Pour cela, je suggère de lier un setTimeout à l'événement onclick, et en supposant qu'après x durée sans touches, l'utilisateur a cessé de taper.
la source
Pourquoi ne pas simplement utiliser onfocusout?
https://www.w3schools.com/jsreF/event_onfocusout.asp
S'il s'agit d'un formulaire, ils laisseront toujours le focus de chaque champ de saisie afin de cliquer sur le bouton Soumettre afin que vous sachiez qu'aucune entrée ne manquera de faire appeler son gestionnaire d'événements onfocusout.
la source
S'il est nécessaire que l'utilisateur s'éloigne du champ, nous pouvons utiliser "onBlur" au lieu d'Onchange en Javascript
Si ce n'est pas nécessaire, régler la minuterie serait la bonne option.
la source
Une fois que vous avez détecté le focus sur la zone de texte, à la clé, effectuez une vérification du délai d'expiration et réinitialisez-la chaque fois qu'elle est déclenchée.
Une fois le délai écoulé, faites votre demande ajax.
la source
Si vous recherchez une longueur spécifique (comme un champ de code postal):
la source
Je ne sais pas si mes besoins sont juste un peu bizarres, mais j'avais besoin de quelque chose de similaire à cela et c'est ce que j'ai fini par utiliser:
Ce qui me permet d'avoir des éléments comme celui-ci dans ma candidature:
Qui sont mis à jour lorsque l'utilisateur a "fini de taper" (aucune action pendant 2 secondes) ou passe à un autre champ (brouille l'élément)
la source
Si vous devez attendre que l'utilisateur ait fini de taper, utilisez simplement ceci:
Exemple complet avec appel ajax - cela fonctionne pour mon téléavertisseur - nombre d'éléments par liste:
la source
Minuteries multiples par page
Toutes les autres réponses ne fonctionnent que pour un seul contrôle ( mon autre réponse incluse). Si vous avez plusieurs contrôles par page (par exemple dans un panier), seul le dernier contrôle où l'utilisateur a tapé quelque chose sera appelé . Dans mon cas, ce n'est certainement pas le comportement souhaité - chaque contrôle doit avoir sa propre minuterie.
Pour résoudre ce problème, vous devez simplement passer un ID à la fonction et maintenir un dictionnaire timeoutHandles comme dans le code suivant:
Déclaration de fonction:
Utilisation de la fonction:
la source
Simple et facile à comprendre.
la source
Pour passer des paramètres à votre fonction avec la syntaxe ES6.
la source
Wow, même 3 commentaires sont assez corrects!
L'entrée vide n'est pas une raison pour ignorer l'appel de fonction, par exemple, je supprime le paramètre de déchets de l'URL avant la redirection
.on ('input', function() { ... });
doit être utilisé pour déclencherkeyup
,paste
et leschange
événementsdéfinitivement
.val()
ou.value
doit être utiliséVous pouvez utiliser la
$(this)
fonction d'événement interne au lieu de#id
travailler avec plusieurs entrées(ma décision) J'utilise la fonction anonyme au lieu de
doneTyping
danssetTimeout
d'accéder facilement à$(this)
partir N.4, mais vous devez d' abord l' enregistrer commevar $currentInput = $(this);
EDIT Je vois que certaines personnes ne comprennent pas les instructions sans la possibilité de copier-coller du code prêt. Vous voilà
la source
paste
, il n'utilise pasthis
, etc. (je pense que c'est important mais je ne veux pas me perdre dans des tonnes de commentaires)