Как избежать автоматического фокуса на поле первого ввода при выпуске 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

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

Answer 2

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

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

Answer 3

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

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

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

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

Answer 4

Я закончил тем, что сделал это:

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

Answer 5

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

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

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

Answer 6

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

1. Удалите план Focus

   :focus {
       outline: 0;
   }
   

2. Добавьте схему нового фокуса

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