JavaScript focus on input

In JavaScript, the elements can be focused using either focus() method or onfocus() event.

What is focus() method?

When we want to focus on an element (if it can be focused) or basically highlight it, the focus() method is used.

This method is supported by mostly all the browsers like Google chrome, safari, Microsoft Edge/Internet Explorer, Oracle, Firefox etc.

NOTE: This method takes no parameters and has no return value as well.

Syntax:

element.focus()

Example:

<!DOCTYPE html>
<html>
<body>


Enter text here: <input type="text" id="tcontent">


<p>This is the example to show a how user can use focus method to an input element.</p>


<button type="button" onclick="myFunctiondemo()">Focus</button>


<script>
function myFunctiondemo() {
  document.getElementById("tcontent").focus();
}
</script>
</body>
</html>

Output:

Intially,

JavaScript Focus On Input

After the button has been selected, the text box gets highlighted

JavaScript Focus On Input

What is onfocus() event?

Whenever an element gets focus, the onfocus() event occurs.
The <input>, <select> and <a> use the onfocus() event commonly.
The onfocus() event can be used with all HTML tags expect for: <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> tags.
Similar to focus() method, the onfocus event is also supported by mostly all the browsers like Google chrome, safari, Microsoft Edge/Internet Explorer, Oracle, Firefox etc.

The input element and onfocus event

An input field is defined by the input tag where the user can enter data. The input tag element can be used to display several types of properties like radio buttons, text fields, checkboxes, dates, email Ids, passwords etc.

So, the onfocus() event or the focus method helps to set focus on the specified input element. The focused element helps in determining that which element will receive keyboard inputs and similar events by default.

The onfocus event can be used commonly in three ways:

  • In HTML,

Syntax:

<element onfocus= functionname>


<script>
function functionname(){
	//definition of the function
}
</script>

Example:

<!DOCTYPE html>
<html>
<body>


<p>This is the example to show a user can use "onfocus" event to an input element.</p>


Enter text here: <input type="text" id="tcontent" onfocus="myFunctiondemo()">


<script>
function myFunctiondemo() {
  document.getElementById("tcontent").style.backgroundColor = "lightblue";
}
</script>


</body>
</html>

Output:

Initially, the input element looks like this,

JavaScript Focus On Input

On focusing (selecting the input text-box):

JavaScript Focus On Input
  • In Javascript

Syntax:

<script>
object.onfocus = function(){functionname};


function functionname(){
	//definition of the function
}
</script>

Example:

<!DOCTYPE html>
<html>
<body>


<p>This is the example to show a user can use "onfocus" event to an input element.</p>


Enter text here: <input type="text" id="tcontent">


<script>
document.getElementById("tcontent").onfocus = function() {myFunctiondemo()};


function myFunctiondemo() {
  document.getElementById("tcontent").style.backgroundColor = "pink";
}
</script>


</body>
</html>

Output:

After the input element is focused (the text box is selected),

JavaScript Focus On Input
  • Using addEventListener() method in JavaScript

Syntax:

<script>
object.addEventListener("focus", functionname);
function functionname(){
	//definition of the function
}
</script>

Example:

<!DOCTYPE html>
<html>
<body>


<p>This is the example to show a user can use "onfocus" event to an input element.</p>


Enter text here: <input type="text" id="tcontent">


<script>
document.getElementById("tcontent").addEventListener("focus", myFunctiondemo);


function myFunctiondemo() {
  document.getElementById("tcontent").style.backgroundColor = "yellow";
}
</script>


</body>
</html>

Output:

After the input element is focused (the text box is selected),

JavaScript Focus On Input

NOTE: Internet Explorers and older versions do not support the method of addEventListener().

How to remove focus from the element?

  • By using the blur() method

Syntax:

element.blur()

Example:

<!DOCTYPE html>
<html>
<body>


Enter text here: <input type="text" id="tcontent">


<p>This is the example to show how a user can use blur method to an input element.</p>




<button type="button" onclick="myFunctiondemo()">Lose focus</button>


<script>


function myFunctiondemo() {
  document.getElementById("tcontent").blur();
}
</script>


</body>
</html>

Output:

When the text box is highlighted initially,

JavaScript Focus On Input

After the button has been selected, the text box loses focus

JavaScript Focus On Input
  • By using the onblur() event

Syntax:

<element onblur= “functionname()”>

Example:

<!DOCTYPE html>
<html>
<body>


<p>This is the example to show a user can use "onblur" event to an input element.</p>


Enter text here: <input type="text" id="tcontent" onblur="myFunctiondemo()">


<script>
function myFunctiondemo() {
  alert("Input field has lost focus.");
}
</script>


</body>
</html>

Output:

After the data has been entered in the input element, if the user clicks anywhere outside the field, it loses focus and an alert appears,

JavaScript Focus On Input



ADVERTISEMENT
ADVERTISEMENT