JavaScirpt Tutorial Index

JavaScript Tutorial Javascript Example Javascript comment Javascript Variable Javascript Data Types Javascript Operators Javascript If Else Javascript Switch Statement Javascript loop JavaScript Function Javascript Object JavaScript Arrays Javascript String Javascript Date Javascript Math Javascript Number Javascript Dialog Box Javascript Window Object Javascript Document Object Javascript Event Javascript Cookies Javascript getElementByID Javascript Forms Validation Javascript Email Validation Javascript Password Validation Javascript Re-Password Validation Javascript Page Redirect Javascript Print How to Print a Page Using JavaScript Textbox events in JavaScript How to find the largest number contained in a JavaScript Array?

Misc

JavaScript P5.js JavaScript Minify JavaScript redirect URL with parameters Javascript Redirect Button JavaScript Ternary Operator JavaScript radio button checked value JavaScript moment date difference Javascript input maxlength JavaScript focus on input Javascript Find Object In Array JavaScript dropdown onchange JavaScript Console log Multiple variables JavaScript Time Picker Demo JavaScript Image resize before upload Functional Programming in JavaScript JavaScript SetTimeout() JavaScript SetInterval() Callback and Callback Hell in JavaScript Array to String in JavaScript Synchronous and Asynchronous in JavaScript Compare two Arrays in JavaScript Encapsulation in JavaScript File Type Validation while Uploading Using JavaScript or jquery Convert ASCII Code to Character in JavaScript Count Character in string in JavaScript Get First Element of Array in JavaScript How to convert array to set in JavaScript How to get current date and time in JavaScript How to Remove Special Characters from a String in JavaScript Number Validation in JavaScript Remove Substring from String in JavaScript

Interview Questions

JavaScript Interview Questions JavaScript Beautifier Practice Javascript Online Object in JavaScript JavaScript Count HTML Interpreter Getters and Setters in JavaScript Throw New Error in JavaScript XOR in JavaScript Callbacks and Promises in JavaScript Atob in JavaScript Binary in JavaScript Palindrome Number in JavaScript How to Get First Character Of A String In JavaScript How to Get Image Data in JavaScript How to get URL in JavaScript JavaScript GroupBy Methods difference-between-var-let-and-const-keyword-in-java-script

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