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

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

Ответы [ 6 ]

17 голосов
/ 23 декабря 2013

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

        <div><!--dialog div-->
           <button></button>
           <button></button> 
          <input type="hidden" autofocus="true" />
        </div>
6 голосов
/ 19 марта 2018

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

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

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

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

6 голосов
/ 12 февраля 2015

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

<input type="text" style="position: fixed; left: -10000000px;" disabled/>
5 голосов
/ 19 октября 2011

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

1 голос
/ 09 октября 2016

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

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

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

0 голосов
/ 03 ноября 2017

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

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

    :focus {
        outline: 0;
    }
    
  2. добавить контур нового фокуса

    :link:focus, :visited:focus {
        outline: none;
    }
    
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...