Set focus to input text box with JavaScript/jQuery

This post will discuss how to set focus on the input text box in JavaScript and jQuery.

1. Using jQuery

With jQuery, you can use the .focus() method to trigger the “focus” JavaScript event on an element. This method is a shortcut for .trigger("focus") method.

jQuery

$(document).ready(function() {

$('#submit').click(function() {

$("#name").focus();

})

});

HTML

</div>

<button id="submit">Focus</button>

Edit in JSFiddle

To set cursor after the last character in the input text box, you can do like:

jQuery

$(document).ready(function() {

$('#submit').click(function() {

var value = $("#name").val();

$("#name").focus().val('').val(value);

})

});

HTML

</div>

<button id="submit">Focus</button>

Edit in JSFiddle

2. Using JavaScript

In JavaScript, you can fire the JavaScript focus event with the .focus() method.

JS

document.getElementById("submit").onclick = function() {

document.getElementById("name").focus();

}

HTML

</div>

<button id="submit">Focus</button>

Edit in JSFiddle

To set the cursor at the end of the input text box, you can do like:

JS

document.getElementById("submit").onclick = function() {

var input = document.getElementById("name");

input.focus();

var val = input.value;

input.value = '';

input.value = val;

}

HTML

</div>

<button id="submit">Focus</button>

Edit in JSFiddle

3. In HTML

In HTML, you can use the autofocus HTML attribute to set the focus on associated <input> element. However, this sets focus only at the page load time but can’t set focus later programmatically.

</div>

<button id="submit">Focus</button>

That’s all about setting focus to the input text box in JavaScript and jQuery.

Set focus to input text box with JavaScript/jQuery

1. Using jQuery

jQuery

HTML

jQuery

HTML

2. Using JavaScript

JS

HTML

JS

HTML

3. In HTML

Share this: