In this article, we will learn how to detect inactivity in the browser using JavaScript.
Here, we are going to use two different JavaScript libraries.
jQuery.js
Include jQuery from a CDN.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
Idle.js
Include below code to your project with the name idle.js.
var _api,_API_JQUERY=1,_API_PROTOTYPE=2,_idleTimeout=3e4,_awayTimeout=6e5,_idleNow=!1,_idleTimestamp=null,_idleTimer=null,_awayNow=!1,_awayTimestamp=null,_awayTimer=null;function setIdleTimeout(e){_idleTimeout=e,_idleTimestamp=(new Date).getTime()+e,null!=_idleTimer&&clearTimeout(_idleTimer),_idleTimer=setTimeout(_makeIdle,e+50)}function setAwayTimeout(e){_awayTimeout=e,_awayTimestamp=(new Date).getTime()+e,null!=_awayTimer&&clearTimeout(_awayTimer),_awayTimer=setTimeout(_makeAway,e+50)}function _makeIdle(){var e=(new Date).getTime();if(e<_idleTimestamp)_idleTimer=setTimeout(_makeIdle,_idleTimestamp-e+50);else{_idleNow=!0;try{document.onIdle&&document.onIdle()}catch(e){}}}function _makeAway(){var e=(new Date).getTime();if(e<_awayTimestamp)_awayTimer=setTimeout(_makeAway,_awayTimestamp-e+50);else{_awayNow=!0;try{document.onAway&&document.onAway()}catch(e){}}}function _initPrototype(){_api=_API_PROTOTYPE}function _active(e){var t=(new Date).getTime();_idleTimestamp=t+_idleTimeout,_awayTimestamp=t+_awayTimeout,_idleNow&&setIdleTimeout(_idleTimeout),_awayNow&&setAwayTimeout(_awayTimeout);try{(_idleNow||_awayNow)&&document.onBack&&document.onBack(_idleNow,_awayNow)}catch(e){}_idleNow=!1,_awayNow=!1}function _initJQuery(){_api=_API_JQUERY;var e=$(document);e.ready(function(){e.mousemove(_active);try{e.mouseenter(_active)}catch(e){}try{e.scroll(_active)}catch(e){}try{e.keydown(_active)}catch(e){}try{e.click(_active)}catch(e){}try{e.dblclick(_active)}catch(e){}})}function _initPrototype(){_api=_API_PROTOTYPE;$(document);Event.observe(window,"load",function(e){Event.observe(window,"click",_active),Event.observe(window,"mousemove",_active),Event.observe(window,"mouseenter",_active),Event.observe(window,"scroll",_active),Event.observe(window,"keydown",_active),Event.observe(window,"click",_active),Event.observe(window,"dblclick",_active)})}try{Prototype&&_initPrototype()}catch(e){}try{jQuery&&_initJQuery()}catch(e){}
In the given example, we set default idle time for 10 seconds, which means if the user is inactive for the next 10 seconds then browser prompts that “User is Idle”.
Here, the user can change the idle time by input.
Open the index.html file and add the code in it.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="idle.js"></script>
</head>
<body>
<br/>
<input type="number" id="txtIdleTime" placeholder="Enter Seconds" />
<button id="btnSubmit">Change Idle Time</button>
<script>
var ms = 1000; // 1000 = 1 Sec | 60000 = 1 Min
var IdleTime;
$(document).ready(function () {
IdleTime = 10;
setIdleTimeout(IdleTime * ms);
});
$(document).on('click', '#btnSubmit', function () {
IdleTime = $("#txtIdleTime").val();
setIdleTimeout(IdleTime * ms);
})
document.onIdle = function () {
alert("User is Idle");
}
</script>
</body>
</html>
That’s it.
Output:
Also, check How To Get Second Highest Salary Using Query In SQL
Saved as a favorite!, I like your web site!
Thank You 🙂
tҺe website іѕ really good, I really like it!
Thank You 🙂