JavaScript Remove Focus

In this section, you will learn how to remove focus from the window using JavaScript.

To remove the focus from the window, we have used blur() method of the Window object. It removes the focus from a window and moves it behind other windows. Now, to explain it more clearly, we have also used the focus() method of Window object which sets the focus to the specified window in front of other windows. When you load the 'removeFocus.html' code, you will get a button 'Set Focus'. On clicking the button, the setFocus() function is called and a new window will get open but the focus is on the 'removeFocus.html' page as we have used the method window.focus(). But on clicking the button 'Remove Focus' from the 'hello.html' page, the removeFocus() function is called and the focus will lost from the current window i.e. hello.html due to the window.blur() method and hence focus gets back to the 'removeFocus.html'.

Here is the code of removeFocus.html:

<html>
<h2>Set Focus</h2>
<script type="text/javascript">
function setFocus(){
window.open("hello.html");
window.focus();
}
</script>
<button onclick="setFocus()">Set Focus</button>
</html>

Here is the code of hello.html:

<html>
<h2>Remove Focus</h2>
<script>
function removeFocus(){
window.blur();
}
</script>
<button onclick="removeFocus()">Remove Focus</button>
</html>

Output will be displayed as:

On clicking the button 'Set Focus', a 'hello.html' page will get open:

On clicking the button 'RemoveFocus' , you will move back to the 'removeFocus.html'

Download Source Code:

Related Tags for JavaScript Remove Focus:

«Previous Index Next»