DEMO : Duration of Key hold by using keyup() and keydown() events

Press any key and hold it for some time. After releasing you can see the duration in milliseconds you hold the key. The keycode of the pressed key is also displayed. You can try this by using different keys.

JQuery

<script>
$(document).ready(function() {
var t1=0
$(document).keydown(function(){
	if(t1==0){
var my_time = new Date();	
t1=my_time.getTime()
	}
$('#d1').html("Starting of keydown for keycode : " + 
event.which + " AT : " + t1 );
$('#d2').html("Still holding .... <br>.." );
});
	
$(document).keyup(function(){
	
 var my_time = new Date();
 t2=my_time.getTime()
 var t=t2-t1;
$('#d2').html("Ending with keyup for keycode : " + 
event.which + " AT :" + t2 +"<br> Duration hold: " + t + " Milli seconds" );
t1=0;
});
})
</script>

  • Video Tutorial on keyboard Events


Event Reference Keypress() keyup() keydown()

Learn which key is pressed by user


plus2net.com



Post your comments , suggestion , error , requirements etc here .







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element


JQuery Video Tutorials




We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2020 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer