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

Я видел похожие вопросы по 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"); }
        }
    ] });
});

Ответы

Ответ 1

Решение состоит в том, чтобы установить tabindex="-1" в поля ввода ВСЕ, чтобы сохранить замещающие HTML-метки.

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

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

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

Ответ 5

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

  • удалить все фокусы фокуса

    :focus {
    outline: 0;
}

  • добавить новый план фокусировки

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