Exécuter la fonction javascript lorsque l'utilisateur a fini de taper au lieu de la touche up?

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

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 ...

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example
var $input = $('#myInput');

//on keyup, start the countdown
$input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$input.on('keydown', function () {
  clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}

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.

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms (5 seconds)

//on keyup, start the countdown
$('#myInput').keyup(function(){
    clearTimeout(typingTimer);
    if ($('#myInput').val()) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

Et le même code dans la solution JavaScript vanilla:

//setup before functions
let typingTimer;                //timer identifier
let doneTypingInterval = 5000;  //time in ms (5 seconds)
let myInput = document.getElementById('myInput');

//on keyup, start the countdown
myInput.addEventListener('keyup', () => {
    clearTimeout(typingTimer);
    if (myInput.value) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

Cette solution utilise ES6 mais elle n'est pas nécessaire ici. Remplacez simplement letpar varet la fonction flèche par une fonction régulière.

C'est juste une ligne avec la fonction anti-rebond underscore.js :

$('#my-input-box').keyup(_.debounce(doSomething , 500));

Cela dit essentiellement doSomething 500 millisecondes après que j'arrête de taper.

Pour plus d'informations: http://underscorejs.org/#debounce

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.

var timer;
var x;

$(".some-input").keyup(function () {
    if (x) { x.abort() } // If there is an existing XHR, abort it.
    clearTimeout(timer); // Clear the timer so we don't end up with dupes.
    timer = setTimeout(function() { // assign timer a new timeout 
        x = $.getJSON(...); // run ajax request and store in x variable (so we can cancel)
    }, 2000); // 2000ms delay, tweak for faster/slower
});

J'espère que cela t'aides,

Marko

var timer;
var timeout = 1000;

$('#in').keyup(function(){
    clearTimeout(timer);
    if ($('#in').val) {
        timer = setTimeout(function(){
            //do stuff here e.g ajax call etc....
             var v = $("#in").val();
             $("#out").html(v);
        }, timeout);
    }
});

exemple complet ici: http://jsfiddle.net/ZYXp4/8/

Les deux principales réponses ne fonctionnent pas pour moi. Voici donc ma solution:

var timeout = null;

$('#myInput').keyup(function() {
    clearTimeout(timeout);

    timeout = setTimeout(function() {
        //do stuff here
    }, 500);
});

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:

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example

//on keyup, start the countdown
$('#myInput').on("keyup", function(){
    if (typingTimer) clearTimeout(typingTimer);                 // Clear if already set     
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$('#myInput').on("keydown", function(){
    clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

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é!

Modification de la réponse acceptée pour gérer des cas supplémentaires tels que la pâte:

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 2000;  //time in ms, 2 second for example
var $input = $('#myInput');

// updated events 
$input.on('input propertychange paste', function () {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(doneTyping, doneTypingInterval);      
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}

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:

var _timer, _timeOut = 2000; 



function _onKeyUp(e) {
    clearTimeout(_timer);
    if (e.keyCode == 13) {      // close on ENTER key
        _onCloseClick();
    } else {                    // send xhr requests
        _timer = window.setTimeout(function() {
            _onInputChange();
        }, _timeOut)
    }

}

C'est ma première réponse sur Stack Overflow, donc j'espère que cela aidera quelqu'un, un jour :)

Déclarez la delayfonction suivante :

var delay = (function () {
    var timer = 0;
    return function (callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    };
})()

puis l'utiliser:

let $filter = $('#item-filter');
$filter.on('keydown', function () {
    delay(function () {            
        console.log('this will hit, once user has not typed for 1 second');            
    }, 1000);
});    

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.

function debounce(callback, wait) {
  let timeout;
  return (...args) => {
      const context = this;
      clearTimeout(timeout);
      timeout = setTimeout(() => callback.apply(context, args), wait);
  };
}

window.addEventListener('keyup', debounce( () => {
    // code you would like to run 1000ms after the keyup event has stopped firing
    // further keyup events reset the timer, as expected
}, 1000))

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)

J'ai l'impression que la solution est un peu plus simple avec l' inputévénement:

var typingTimer;
var doneTypingInterval = 500;

$("#myInput").on("input", function () {
    window.clearTimeout(typingTimer);
    typingTimer = window.setTimeout(doneTyping, doneTypingInterval);
});

function doneTyping () {
    // code here
}

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

var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms (5 seconds)

//on input change, start the countdown

$('#myInput').on("input", function() {    
    clearTimeout(typingTimer);
    typingTimer = setTimeout(function(){
        // doSomething...
    }, doneTypingInterval);
});

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;

<input type="text" id="input" placeholder="please type" style="padding-left:20px;"/>
<div class="data"></div>

code javascript

var textInput = document.getElementById('input');
var textdata = document.querySelector('.data');
// Init a timeout variable to be used below
var timefired = null;

// Listen for keystroke events
// Init a timeout variable to be used below
var timefired = null;// Listen for keystroke events
textInput.onkeyup = function (event) {
clearTimeout(timefired);
timefired = setTimeout(function () {
    textdata.innerHTML = 'Input Value:'+ textInput.value;
  }, 600);
};

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:

$(document).ready(function() {
    $('#yourtextfield').keyup(function() {
        s = $('#yourtextfield').val();
        setTimeout(function() { 
            if($('#yourtextfield').val() == s){ // Check the value searched is the latest one or not. This will help in making the ajax call work when client stops writing.
                $.ajax({
                    type: "POST",
                    url: "yoururl",
                    data: 'search=' + s,
                    cache: false,
                    beforeSend: function() {
                       // loading image
                    },
                    success: function(data) {
                        // Your response will come here
                    }
                })
            }
        }, 1000); // 1 sec delay to check.
    }); // End of  keyup function
}); // End of document.ready

Vous remarquerez qu'il n'est pas nécessaire d'utiliser un minuteur lors de l'implémentation.

Voici le code JS simple que j'ai écrit:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head><title>Submit after typing finished</title>
<script language="javascript" type="text/javascript">
function DelayedSubmission() {
    var date = new Date();
    initial_time = date.getTime();
    if (typeof setInverval_Variable == 'undefined') {
            setInverval_Variable = setInterval(DelayedSubmission_Check, 50);
    } 
}
function DelayedSubmission_Check() {
    var date = new Date();
    check_time = date.getTime();
    var limit_ms=check_time-initial_time;
    if (limit_ms > 800) { //Change value in milliseconds
        alert("insert your function"); //Insert your function
        clearInterval(setInverval_Variable);
        delete setInverval_Variable;
    }
}

</script>
</head>
<body>

<input type="search" onkeyup="DelayedSubmission()" id="field_id" style="WIDTH: 100px; HEIGHT: 25px;" />

</body>
</html>

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.

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.

S'il est nécessaire que l'utilisateur s'éloigne du champ, nous pouvons utiliser "onBlur" au lieu d'Onchange en Javascript

  <TextField id="outlined-basic"  variant="outlined" defaultValue={CardValue} onBlur={cardTitleFn} />

Si ce n'est pas nécessaire, régler la minuterie serait la bonne option.

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.

Si vous recherchez une longueur spécifique (comme un champ de code postal):

$("input").live("keyup", function( event ){
if(this.value.length == this.getAttribute('maxlength')) {
        //make ajax request here after.
    }
  });

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:

$('input.update').bind('sync', function() {
    clearTimeout($(this).data('timer'));            
    $.post($(this).attr('data-url'), {value: $(this).val()}, function(x) {
        if(x.success != true) {
            triggerError(x.message);    
        }
    }, 'json');
}).keyup(function() {
    clearTimeout($(this).data('timer'));
    var val = $.trim($(this).val());
    if(val) {
        var $this = $(this);
        var timer = setTimeout(function() {
            $this.trigger('sync');
        }, 2000);
        $(this).data('timer', timer);
    }
}).blur(function() {
    clearTimeout($(this).data('timer'));     
    $(this).trigger('sync');
});

Ce qui me permet d'avoir des éléments comme celui-ci dans ma candidature:

<input type="text" data-url="/controller/action/" class="update">

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)

Si vous devez attendre que l'utilisateur ait fini de taper, utilisez simplement ceci:

$(document).on('change','#PageSize', function () {
    //Do something after new value in #PageSize       
});

Exemple complet avec appel ajax - cela fonctionne pour mon téléavertisseur - nombre d'éléments par liste:

$(document).ready(function () {
    $(document).on('change','#PageSize', function (e) {
        e.preventDefault();
        var page = 1;
        var pagesize = $("#PageSize").val();
        var q = $("#q").val();
        $.ajax({
            url: '@Url.Action("IndexAjax", "Materials", new { Area = "TenantManage" })',
            data: { q: q, pagesize: pagesize, page: page },
            type: 'post',
            datatype: "json",
            success: function (data) {
                $('#tablecontainer').html(data);
               // toastr.success('Pager has been changed', "Success!");
            },
            error: function (jqXHR, exception) {
                ShowErrorMessage(jqXHR, exception);
            }
        });  
    });
});    

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:

var delayUserInput = (function () {
    var timeoutHandles = {};    
    return function (id, callback, ms) {        
        if (timeoutHandles[id]) {
            clearTimeout(timeoutHandles[id]);
        }

        timeoutHandles[id] = setTimeout(callback, ms);             
    };
})();

Utilisation de la fonction:

  delayUserInput('yourID', function () {
     //do some stuff
  }, 1000);

Simple et facile à comprendre.

var mySearchTimeout;
$('#ctl00_mainContent_CaseSearch').keyup(function () {
   clearTimeout(mySearchTimeout);
   var filter = $(this).val();
   mySearchTimeout = setTimeout(function () { myAjaxCall(filter); }, 700);
   return true;
});

Pour passer des paramètres à votre fonction avec la syntaxe ES6.

$(document).ready(() => {
    let timer = null;
     $('.classSelector').keydown(() => {
     clearTimeout(timer); 
     timer = setTimeout(() => foo('params'), 500);
  });
});

const foo = (params) => {
  console.log(`In foo ${params}`);
}

Wow, même 3 commentaires sont assez corrects!

1. 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

2. .on ('input', function() { ... });doit être utilisé pour déclencher keyup, pasteet les changeévénements

3. définitivement .val()ou .valuedoit être utilisé

4. Vous pouvez utiliser la $(this)fonction d'événement interne au lieu de #idtravailler avec plusieurs entrées

5. (ma décision) J'utilise la fonction anonyme au lieu de doneTypingdans setTimeoutd'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à

var typingTimer;
//                  2
$("#myinput").on('input', function () {
    //             4     3
    var input = $(this).val();
    clearTimeout(typingTimer);
    //                           5
    typingTimer = setTimeout(function() {
        // do something with input
        alert(input);
    }, 5000);      
});