Javascript: Doe iets wanneer gebruiker stopt met typen.
Er kunnen verschillende redenen zijn waarom je wilt weten wanneer een gebruiker stopt met typen in bijvoorbeeld een textarea. Je kan een berichtje in beeld laten zien van HALLO LET EENS OP. De meest waarschijnlijke toepassing is overduidelijk natuurlijk dat je de inhoud wilt bewaren/saven met een XMLHttpRequest. Als je dat continu doet als de textarea van inhoud wijzigt dan duurt het niet lang voor je server niet meer reageert.
Javascript heeft deze functionaliteit er niet standaard inzitten en eigenlijk is dat logisch want het is niet echt definieerbaar wanneer de gebruiker is gestopt met typen zonder een context te overwegen. Wanneer ben je gestopt met typen? Dat verschilt per persoon maak ook per client device. Het meest accurate antwoord daarop is wanneer de focus() niet meer actief is op het element. De gebruiker heeft dan een element aangeraakt buiten het invoerveld. Wat je eigenlijk wilt meten is hoe lang de user idle is.
Dus. Als je wilt nagaan of de gebruiker is gestopt met typen (zonder overbodige dingen) dan doe je dat als volgt:
/* Volg mij op Github, G. */ /* (Native) Javascript snippet to check whether a user stops typing * * @author Jochem Stoel * @url http://jochemstoel.github.io/ */ var $typingTimer; var $doneTypingInterval = 3000; // 3 seconds /* User presses a key. */ function key_down() { clearTimeout($typingTimer); }; /* User releases a key. */ function key_up() { clearTimeout($typingTimer); $typingTimer = setTimeout(update, $doneTypingInterval); }; textarea = document.getElementById('mytextarea'); $editor.setAttribute('onkeyup', 'key_up()'); $editor.setAttribute('onkeydown', 'key_down()');
$typingTimer bevat de opdracht om de functie 'update' uit te voeren na 3 seconden. Elke keer als de gebruiker enige vorm van activiteit vertoont door op een toets te drukken of los te laten dan wordt die timer eerst gereset en daarna opnieuw gedefineerd nog voordat de call naar die functie is uitgevoerd.
Drie seconden is relatief kort. Destijds heb ik het getest op een actieve website met heel veel gebruikers en ik concludeerde dat 8 seconden de meest optimale interval is.
De oplossing die ik hier beschrijf heb ik netjes op Github gedumpt.
https://github.com/jochemstoel/native-javascript-user-stops-typing