CODEWITHSUNDEEP
javascripthtmltextboxfocus
tenstar
tenstar

Reputation: 10506

How can I set focus on an element in an HTML form using JavaScript?

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>

Upvotes: 441

Views: 1127091

Answers (13)

Lidprogsky
Lidprogsky

Reputation: 43

Try This:

$('.modal').on('shown.bs.modal', function () {
  setTimeout(function() {
    $("input#yourFieldId").addClass('modal-primary-focus').focus();
   }, 500);
});

Upvotes: 0

Balaji
Balaji

Reputation: 10877

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>

Upvotes: 3

Omar Saade
Omar Saade

Reputation: 591

<input type="text" class="word"> //html code

let theinput = document.querySelector(".word"); //Get the input 
 theinput.focus(); // focus on input

Upvotes: 1

StefaDesign
StefaDesign

Reputation: 959

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(); solved the issue so DOM completes blur without adding delay.

Upvotes: 1

CenkerK
CenkerK

Reputation: 11

this example worked for me

$(document).ready(function () {
document.getElementById('TextBox').focus();
}

Upvotes: 1

a better oliver
a better oliver

Reputation: 26828

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 />

Upvotes: 209

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92347

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>

Upvotes: 1

Richard Rebeco
Richard Rebeco

Reputation: 803

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()

Upvotes: 42

user6558655
user6558655

Reputation:

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. ;)

Upvotes: 3

Mac
Mac

Reputation: 1566

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

Upvotes: 2

Khanh TO
Khanh TO

Reputation: 48972

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.

Upvotes: 89

sipp
sipp

Reputation: 420

For plain Javascript, try the following:

window.onload = function() {
  document.getElementById("TextBoxName").focus();
};

Upvotes: 23

mohkhan
mohkhan

Reputation: 12295

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>

Upvotes: 717

Related Questions