Rectangle 27 282

Set focus on the first text field:

$("input:text:visible:first").focus();

This also does the first text field, but you can change the [0] to another index:

$('input[@type="text"]')[0].focus();

Or, you can use the ID:

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

If using a dialog please see this answer if the above is not working stackoverflow.com/a/20629541/966609

$('input[type="text"]').get(0).focus();

javascript - How to focus on a form input text field on page load usin...

javascript jquery html focus
Rectangle 27 282

Set focus on the first text field:

$("input:text:visible:first").focus();

This also does the first text field, but you can change the [0] to another index:

$('input[@type="text"]')[0].focus();

Or, you can use the ID:

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

If using a dialog please see this answer if the above is not working stackoverflow.com/a/20629541/966609

$('input[type="text"]').get(0).focus();

javascript - How to focus on a form input text field on page load usin...

javascript jquery html focus
Rectangle 27 61

You can use HTML5 autofocus for this. You don't need jQuery or other JavaScript.

<input type="text" name="some_field" autofocus>

Note this will not work on IE9 and lower.

javascript - How to focus on a form input text field on page load usin...

javascript jquery html focus
Rectangle 27 61

You can use HTML5 autofocus for this. You don't need jQuery or other JavaScript.

<input type="text" name="some_field" autofocus>

Note this will not work on IE9 and lower.

javascript - How to focus on a form input text field on page load usin...

javascript jquery html focus
Rectangle 27 24

<head>
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#myTextBox").focus();
        });
    </script>
</head>
<body>
    <input type="text" id="myTextBox">
</body>

javascript - How to focus on a form input text field on page load usin...

javascript jquery html focus
Rectangle 27 24

<head>
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#myTextBox").focus();
        });
    </script>
</head>
<body>
    <input type="text" id="myTextBox">
</body>

javascript - How to focus on a form input text field on page load usin...

javascript jquery html focus
Rectangle 27 15

Think about your user interface before you do this. I assume (though none of the answers has said so) that you'll be doing this when the document loads using jQuery's ready() function. If a user has already focussed on a different element before the document has loaded (which is perfectly possible) then it's extremely irritating for them to have the focus stolen away.

You could check for this by adding onfocus attributes in each of your <input> elements to record whether the user has already focussed on a form field and then not stealing the focus if they have:

var anyFieldReceivedFocus = false;

function fieldReceivedFocus() {
    anyFieldReceivedFocus = true;
}

function focusFirstField() {
    if (!anyFieldReceivedFocus) {
        // Do jQuery focus stuff
    }
}


<input type="text" onfocus="fieldReceivedFocus()" name="one">
<input type="text" onfocus="fieldReceivedFocus()" name="two">

Your perspective is not only technically correct, but your consideration for the best UX possible is exquisite. Bravo!

javascript - How to focus on a form input text field on page load usin...

javascript jquery html focus
Rectangle 27 15

Think about your user interface before you do this. I assume (though none of the answers has said so) that you'll be doing this when the document loads using jQuery's ready() function. If a user has already focussed on a different element before the document has loaded (which is perfectly possible) then it's extremely irritating for them to have the focus stolen away.

You could check for this by adding onfocus attributes in each of your <input> elements to record whether the user has already focussed on a form field and then not stealing the focus if they have:

var anyFieldReceivedFocus = false;

function fieldReceivedFocus() {
    anyFieldReceivedFocus = true;
}

function focusFirstField() {
    if (!anyFieldReceivedFocus) {
        // Do jQuery focus stuff
    }
}


<input type="text" onfocus="fieldReceivedFocus()" name="one">
<input type="text" onfocus="fieldReceivedFocus()" name="two">

Your perspective is not only technically correct, but your consideration for the best UX possible is exquisite. Bravo!

javascript - How to focus on a form input text field on page load usin...

javascript jquery html focus
Rectangle 27 11

<input id="search" size="10" />
$("#search").focus();

javascript - How to focus on a form input text field on page load usin...

javascript jquery html focus
Rectangle 27 11

<input id="search" size="10" />
$("#search").focus();

javascript - How to focus on a form input text field on page load usin...

javascript jquery html focus
Rectangle 27 6

Its also worth noting that its possible to use more than one selector, thus you can target any form element, and not just one specific type.

$('#myform input,#myform textarea').first().focus();

This will focus the first input or textarea it finds, and of course you can add other selectors into the mix as well. Hnady if you can't be certain of a specific element type being first, or if you want something a bit general/reusable.

javascript - How to focus on a form input text field on page load usin...

javascript jquery html focus
Rectangle 27 6

Its also worth noting that its possible to use more than one selector, thus you can target any form element, and not just one specific type.

$('#myform input,#myform textarea').first().focus();

This will focus the first input or textarea it finds, and of course you can add other selectors into the mix as well. Hnady if you can't be certain of a specific element type being first, or if you want something a bit general/reusable.

javascript - How to focus on a form input text field on page load usin...

javascript jquery html focus
Rectangle 27 4

<script type="text/javascript">
    $(document).ready(function () {
        $("#fieldID").focus(); 
    });
</script>

It's bad way to do things, to focus on an <input> on document load, just use the autofocus attribute provided by HTML5

javascript - How to focus on a form input text field on page load usin...

javascript jquery html focus
Rectangle 27 4

<script type="text/javascript">
    $(document).ready(function () {
        $("#fieldID").focus(); 
    });
</script>

It's bad way to do things, to focus on an <input> on document load, just use the autofocus attribute provided by HTML5

javascript - How to focus on a form input text field on page load usin...

javascript jquery html focus
Rectangle 27 3

<script type="text/javascript">document.formname.inputname.focus();</script>

javascript - How to focus on a form input text field on page load usin...

javascript jquery html focus
Rectangle 27 3

<script type="text/javascript">document.formname.inputname.focus();</script>

javascript - How to focus on a form input text field on page load usin...

javascript jquery html focus
Rectangle 27 6

Other answers suggest setting the value of the input field to itself after focusing it. If in Firefox, the cursor appears at the start of the input and you want it at the end, then a slight modification is required. You will have to set the value as empty first and then set it to the previous value.

var value = $("#myinputfield").val();
$("#myinputfield").focus().val('').val(value);

javascript - Focus input field with JQuery without selecting current v...

javascript jquery html forms
Rectangle 27 19

Unfortunately, you can't do that without javascript. You can listen to a TAB (and make sure it's not SHIFT+TAB) key press on your last element and manually set the focus to your first element inside the handler. However, binding this logic to keyboard events (i.e. specific input method) is not universal and may not work when using:

  • Some other entertainment device (smart tv, gaming console, etc. - they typically use a D-Pad for jumping between focusable elements)

I suggest a more universal approach which is agnostic of how the focus is changed.

The idea is that you surround your form elements (where you want to create a "tabindex loop") with special "focus guard" elements that are focusable too (they have a tabindex assigned). Here is your modified HTML:

<p>Some sample <a href="#" tabindex="0">content</a> here...</p>
<p>Like, another <input type="text" value="input" /> element or a <button>button</button>...</p>

<!-- Random content above this comment -->
<!-- Special "focus guard" elements around your
if you manually set tabindex for your form elements, you should set tabindex for the focus guards as well -->
<div class="focusguard" id="focusguard-1" tabindex="1"></div>
<input id="firstInput" type="text" tabindex="2" class="autofocus" />
<input type="text" tabindex="3" />
<input type="text" tabindex="4" />
<input type="text" tabindex="5" />
<input type="text" tabindex="6" />
<input id="lastInput" type="text" tabindex="7" />
<!-- focus guard in the end of the form -->
<div class="focusguard" id="focusguard-2" tabindex="8"></div>
<!-- Nothing underneath this comment -->

Now you just listen to focus events on those guard elements and manually change focus to the appropriate field (jQuery used for the sake of simplicity):

$('#focusguard-2').on('focus', function() {
  // "last" focus guard got focus: set focus to the first field
  $('#firstInput').focus();
});

$('#focusguard-1').on('focus', function() {
  // "first" focus guard got focus: set focus to the last field
  $('#lastInput').focus();
});

As you see, I also made sure that we snap back to the last input when the focus moves backwards from the first input (e.g. SHIFT+TAB on the first input). Live example

Note that the focus guards are assigned a tabindex value too to make sure they are focused immediately before/after your input fields. If you don't manually set tabindex to your inputs, then both focus guards can just have tabindex="0" assigned.

Of course you can make this all work in a dynamic environment as well, when your form is generated dynamically. Just figure out your focusable elements (less trivial task) and surround them with the same focus guards.

Hope that helps, let me know if you have any issues.

As nbro pointed out, the above implementation has the unwanted effect of selecting the last element if one hits TAB after the page loads (as this would focus the first focusable element which is #focusguard-1, and that would trigger focusing the last input. To mitigate that, you can specify which element you want initially focused and focus it with another little piece of JavaScript:

$(function() { // can replace the onload function with any other even like showing of a dialog

  $('.autofocus').focus();
})

With this, just set the autofocus class on whatever element you want, and it'll be focused on page load (or any other event you listen to).

This method, though, if I understood correctly, will make the focus go to the last element if I first click on the tab button once the page is loaded, which isn't desirable...

@nbro True, this is an unfortunate side effect. But since this implementation requires "javascript intervention" anyway, it's not unreasonable to require also setting the initial focus via javascript as well. See updated answer.

javascript - How to repeat the tabindex from 1 after it has gone to th...

javascript jquery html tabindex