Typing detection

typing detection

by janetyc

HTML

<h3>Test finishing typing</h3>
<div>
    <input type="text" id="myInput" /><span id="test"></span><br/>
</div>
<div>
    <input type="text" value="some text" id="myInput2"/><span id="test2"></span>
</div>

CSS

h3 {
    margin: 5px;
    font-weight: bold;
}
div {
    margin: 10px 0px 10px 20px;
    padding:5px;
}
span {
    padding: 5px;
}

JavaScript

var typingTimer;                
var doneTypingInterval = 6000;

//on keyup, start the countdown
$('#myInput').keyup(function(){
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
    $("#test").text(typingTimer);
    $("#test").text("typing up...... ("+typingTimer+")").slideDown(1000);
});

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

//finished typing, do something
function doneTyping () {
    $("#test").text("finished "+typingTimer);
    $("#test").slideUp(1000);
}
        
$("#myInput2").keyup(function () {
    var value = $(this).val();
    $("#test2").text(value);
}).keyup();