Как избежать автоматической фокусировки на первом поле ввода при выводе HTML-формы в виде диалога JQuery?

Question

Я видел похожие вопросы по SO, включая этот , который является старым.Я читал и следовал по ссылкам, но неясно, существует ли сегодня правильное решение этой проблемы.

Моя основная проблема заключается в том, что я использую HTML placeholder="..." в полях ввода.При автоматической фокусировке на первом поле его заполнитель больше не виден пользователю.

РЕДАКТИРОВАТЬ

Вот мой HTML-код:

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

Вот мой код JS:

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

Answer 1

Я создал дополнительный ввод и сделал его невидимым (style="display:none"), а затем присвоил ему свойство autofocus="true", поместив его в конец содержимого диалога, чтобы оно ни с чем не связывалось.это должно выглядеть так:

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

Answer 2

Добавление этого тега в качестве первого поля ввода на странице работает для меня.

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

Нет необходимости в javascript и сохраняет порядок вкладок, если вы хотите использовать клавишу табуляции для перемещения по полям.

(протестировано на Chrome> 65, Firefox> 59 и Edge)

Answer 3

Я закончил этим:

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

Answer 4

Решение состоит в том, чтобы установить tabindex="-1" на ALL поля ввода, чтобы держать HTML-заполнители видимыми.

Answer 5

Вы можете использовать jquery:

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

Это если вам трудно отследить ошибку, почему автофокус установлен в вашем первом поле ввода формы. Обязательно вставьте этот код перед закрывающим тегом </body> вашего документа.

Answer 6

Без JQuery и JavaScript мы можем предложить решение только для CSS.

1. удалить все очертания фокуса

   :focus {
       outline: 0;
   }
   

2. добавить контур нового фокуса

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