blur(): lost focus

Source code

<input type=text value='Welcome to plus2net' class='form-control' id=my_input>
<BR><BR>
<input type="button" name="btn" value="Click to Focus text input" onclick="to_focus()";>
<input type="button" name="btn" value="Click to Blur text input" onclick="to_blur()";>
<br><br>
<script language=javascript>
function to_focus(){
document.getElementById("my_input").focus();
}

function to_blur(){
document.getElementById("my_input").blur();
}
</script>

We can lost focus from a window by using blur() method. Here is the syntax

window.blur();

Once the focus is lost then the window will be minimized ( not closed ) .
To get the window again we have to use window.focus()
DEMO of window.blur and window focus method

Check the status of the window focus by using document.hasFocus()

You can see the source code of above demo here

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Demo of blur and focus of a window</title>

<script language=javascript>

function to_close(){
tm.close();
}

function to_open(){
tm=window.open("moveby-child.htm","Ratting","width=250,height=150,left=150,0,top=200,status=0,");
}


function to_focus(){
tm.focus();   // Keeping the focus on small window
}

function to_blur(){
tm.blur();   // Keeping the focus out on small window
}
//////////////////
function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_msg()',refresh)
}

function display_msg() {
if ( document.hasFocus() ) {
document.getElementById('my_msg').style.backgroundColor = "#00f000";	
document.getElementById('my_msg').innerHTML = "This document is in Focus ";
}else{
document.getElementById('my_msg').style.backgroundColor = "#f07814";
document.getElementById('my_msg').innerHTML = "This document is NOT in Focus ";	
}
display_c();
 }

//////////////
</script>

</head>
<body onload=display_c();>
<br><br><input type="button" name="btn" value="Open child window" onclick="to_open()";>
<input type="button" name="btn" value="Close Child window" onclick="to_close()";>
<input type="button" name="btn" value="Focus child window" onclick="to_focus()";>
<input type="button" name="btn" value="Blur Child window " onclick="to_blur()";>
<br><br>
<span id=my_msg>Wait for Status here</span>

</body>
</html>

The code for child window is available at moveBy
Window Focus
Window Object Bookmark a page Redirect Page

Subscribe to our YouTube Channel here

This article is written by plus2net.com team.

plus2net.com