How can I set focus on an element in an HTML form using JavaScript?
Question
I have a web form with a text box in it. How do I go about setting focus to the text box by default?
Something like this:
<body onload='setFocusToTextBox()'>
so can anybody help me with it? I don't know how to set focus to the text box with JavaScript.
<script>
function setFocusToTextBox(){
//What to do here
}
</script>
13 answers
solution1
642 ACCPTED 2013-07-06 07:21:02
Do this.
If your element is something like this..
<input type="text" id="mytext"/>
Your script would be
<script>
function setFocusToTextBox(){
document.getElementById("mytext").focus();
}
</script>
solution2
167 2013-07-06 07:30:03
For what it's worth, you can use the autofocus attribute on HTML5 compatible browsers. Works even on IE as of version 10.
<input name="myinput" value="whatever" autofocus />
solution3
74 2013-07-06 07:25:28
Usually when we focus on a textbox, we should also scroll into view
function setFocusToTextBox(){
var textbox = document.getElementById("yourtextbox");
textbox.focus();
textbox.scrollIntoView();
}
Check if it helps.
solution4
34 2015-03-10 18:32:17
If your code is:
<input type="text" id="mytext"/>
And If you are using JQuery, You can use this too:
<script>
function setFocusToTextBox(){
$("#mytext").focus();
}
</script>
Keep in mind that you must draw the input first $(document).ready()
solution5
22 2013-07-06 07:21:42
For plain Javascript, try the following:
window.onload = function() {
document.getElementById("TextBoxName").focus();
};
solution6
3
I used to just use this:
<html>
<head>
<script type="text/javascript">
function focusFieldOne() {
document.FormName.FieldName.focus();
}
</script>
</head>
<body onLoad="focusFieldOne();">
<form name="FormName">
Field <input type="text" name="FieldName">
</form>
</body>
</html>
That said, you can just use the autofocus attribute in HTML 5.
Please note: I wanted to update this old thread showing the example asked plus the newer, easier update for those still reading this. ;)
solution7
2 2014-12-22 15:22:28
As mentioned earlier, document.forms works too.
function setFocusToTextBox( _element ) {
document.forms[ 'myFormName' ].elements[ _element ].focus();
}
setFocusToTextBox( 0 );
// sets focus on first element of the form
solution8
1 2019-04-09 06:26:28
If your <input> or <textarea> has attribute id=mytext then use
mytext.focus();
function setFocusToTextBox() { mytext.focus(); }
<body onload='setFocusToTextBox()'> <form> <input type="text" id="mytext"/> </form> </body>
solution9
1 2022-02-21 11:13:58
this example worked for me
$(document).ready(function () {
document.getElementById('TextBox').focus();
}
solution10
0 2019-06-11 02:49:59
window.onload is to put focus initially onblur is to put focus while you click outside of the textarea,or avoid text area blur
<textarea id="focus"></textarea>
<script>
var mytexarea=document.getElementById("focus");
window.onload=function()
{
mytexarea.focus();
}
</script>
solution11
0 2022-01-11 13:13:04
Try This:
$('.modal').on('shown.bs.modal', function () {
setTimeout(function() {
$("input#yourFieldId").addClass('modal-primary-focus').focus();
},
500);
});
solution12
0 2022-03-04 17:09:19
Thought of sharing some edge cases for this subject. If your content is reloading (example dynamic DOM loading results from API and setting focus on first item of results) adding attribute autofocus will not be your solution, it works only on first load, second DOM change will not work but works fine in static DOM or single page load. If you have Dynamic component loading data simple .focus() will fail due to triggering focus on element not created yet by the time focus() is or blur not complete yet by DOM. For this case expected is to add delay time (setTimeout function) to give a time for focus to apply to new created or recreated element in DOM. My case was to load data from API and get focus on first result. Adding var el = document.getElementById(focusId); el.focus(); var el = document.getElementById(focusId); el.focus(); solved the issue so DOM completes blur without adding delay.
solution13
0 2022-03-18 19:22:01
<input type="text" class="word"> //html code
let theinput = document.querySelector(".word"); //Get the input
theinput.focus(); // focus on input
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.