How to avoid automatic focus on first input field when popping a HTML form as a JQuery dialog?

Question

I have seen similar questions on SO, including this one, which is old. I read and followed links, but it is unclear whether there is a proper solution to this issue today.

My bottom issue is that I am using HTML's placeholder="..." on the input fields. By focusing automatically on the first field, its placeholder is not visible to the user anymore.

EDIT

Here is my HTML code:

<div id='LOGIN_FORM' title="Login">
    <form action="">
        <input type="text" name="login_id" required="required"
                           placeholder="Enter user ID" /><br />
        <input type="password" name="login_pwd" required="required"
                           placeholder="Enter password" /><br />
    </form>
</div>

Here is my JS code:

$("#login").click(function() { 
    $("#LOGIN_FORM").dialog({ modal: true }, { buttons: [
    {
            text: "Ok",
            click: function() { $(this).dialog("close"); }
        }
    ] });
});

@mblase75 Sorry, but I don't see how the approved answer (or others) solve this issue (I am new to JS). — Jérôme Verstrynge, Oct 19 '11 at 20:10

score 24 · Answer 1 · edited Nov 18 '15 at 13:27

24

What I did was I created an extra input and made it invisible (style="display:none") then gave it the property autofocus="true" put this at the end of your dialog content so it wont mess with anything. it should look like this:

        <div><!--dialog div-->
           <button></button>
           <button></button> 
          <input type="hidden" autofocus="true" />
        </div>

edited Nov 18 '15 at 13:27

Rudi Kershaw

12,332
7
52
77

answered Dec 22 '13 at 23:09

Tyler Richardson

279
1
4
11

2

I followed your solution but it has one great disadvantage - if you bind a _blur_ event to the first input on form (the one that had been auto-focused before) it will be fired right after page loads (try with alert() or console.log()). To avoid this type of issues try to use input of _text_ type instead of _hidden_, ie.: ``. – Kamil Szymański Apr 19 '15 at 23:24
1

I also had another issue with Chrome, it works first time, but when I close the dialog and reopen it, it ignores it – Ayyash Apr 22 '15 at 16:07
Thanks buddy. You saved my day. – dhruv jadia Mar 23 '18 at 06:56

score 12 · Accepted Answer · answered Oct 19 '11 at 19:53

12

A solution is to set tabindex="-1" on ALL input fields to keep HTML placeholders visible.

answered Oct 19 '11 at 19:53

Jérôme Verstrynge

57,710
92
283
453

23

defeats the purpose of navigating form through tabs – Pankaj Phartiyal Mar 31 '14 at 12:44
19

This breaks accessibility. Not a viable tradeoff. – davidgoli Aug 13 '15 at 19:14
This aswer is as good as saying "dont show your popup at all" – Antoniossss Apr 13 '18 at 11:18
I agree, that this is not the best for accessibility. In my case it was the best (and right) solution though, as I know that my website will be only used on touch devices and I can ignore keyboard-related navigation – Dominik Ehrenberg Jun 21 '22 at 08:24

score 11 · Answer 3 · answered Mar 18 '18 at 23:48

11

Adding this tag as the first input field on the page works for me.

<input type="text" autofocus="autofocus" style="display:none" />

No need for javascript and keeps the tab order if you want to use the tab key to move through the fields.

(Tested on Chrome > 65, Firefox > 59 and Edge)

answered Mar 18 '18 at 23:48

Miguel

1,575
1
27
31

That great you save the time. – Vinay Kaithwas Apr 16 '20 at 12:20

score 8 · Answer 4 · answered Feb 12 '15 at 14:25

8

I ended up doing this:

<input type="text" style="position: fixed; left: -10000000px;" disabled/>

answered Feb 12 '15 at 14:25

Robert

667
7
15

1

putting this as first field works for me, it doesn't fire a blur on the other real fields – Ayyash Apr 22 '15 at 16:16

score 5 · Answer 5 · answered Jan 06 '20 at 13:40

5

In my case solution with display: none or type=hidden did not help. You can use

<div style="max-width: 0; max-height: 0; overflow: hidden;">
    <input autofocus="true" />
</div>

as first input.

answered Jan 06 '20 at 13:40

emp

117
2
6

score 2 · Answer 6 · answered Nov 26 '22 at 20:31

2

Set tabindex=0 on the form. This fixes your issue and should be fine as far as accessibility is concerned.

answered Nov 26 '22 at 20:31

Neil Girardi

4,533
1
28
45

score 1 · Answer 7 · answered Oct 09 '16 at 14:40

1

You can use jquery:

jQuery(document).ready(function(e) {
   $('input[name="login_id"]').blur(); 
});

This if you find it hard to trace the bug why autofocus is set into your first input field of the form. Make sure to insert this code before the closing </body> body tag of your document.

answered Oct 09 '16 at 14:40

Felix Jr

402
6
10

problem with this approach is if you have an event listener for onblur on the input (ie, do an auto-search upon blurring the element) – Gonçalo Vieira Aug 28 '17 at 09:07

score 0 · Answer 8 · answered Aug 27 '20 at 10:07

0

This works for me.

<input type="text" name="fake[email]" style="height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);border:0;outline:none;padding:0;margin:0;color:transparent;" tab-index="-1" aria-hidden="true" value=".">

answered Aug 27 '20 at 10:07

Mohamad Hamouday

2,070
23
20

score 0 · Answer 9 · answered Jul 06 '22 at 18:17

0

I solved this issue on my Laravel + Bootstrap setup using below code in my blade template:

{{ Form::text(null, null, ['class' => 'd-none', 'autofocus']) }}

answered Jul 06 '22 at 18:17

Nightcrawler

1

score -4 · Answer 10 · edited Nov 02 '17 at 21:51

-4

Without JQuery and JavaScript, we can give a CSS-only solution.

remove all focus's outline
```
:focus {
    outline: 0;
}
```

add the new focus's outline

:link:focus, :visited:focus {
    outline: none;
}

edited Nov 02 '17 at 21:51

Thomas Fritsch

9,639
33
37
49

answered Nov 02 '17 at 21:31

Ortsbo

175
1
7

Although this will "appear" to resolve the issue, it creates several more accessibility issues :) http://www.outlinenone.com/ – mikestreety Mar 07 '18 at 12:35

How to avoid automatic focus on first input field when popping a HTML form as a JQuery dialog?

10 Answers10

Linked