Как сосредоточиться на первом поле ввода в диалоговом окне

0

У меня есть следующие тестовые html файлы, которые я удалил из них ненужные теги

dialogTest.htm

<!DOCTYPE>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="../theme/blitzer.css" />
    <script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-1.10.3.custom.min.js"></script>
    <script type="text/javascript">
        $(function () {

            $("#dlg").dialog({
                autoOpen: false,
                resizable: false,
                modal: true
            });

            $('#button1').click(function () {
                ChangePassword();
            });

        });

        var loadedByFunction = false;

        function ChangePassword() {
            loadedByFunction = true;
            $("#dlg").dialog('option', {
                width: 380,
                height: 300,
                title: 'Change Password',
                close: function (event, ui) {}
            });
            $('#dlg').children().attr('src', 'dialogContent.htm')
            .load(function () {
                if (loadedByFunction) {
                    loadedByFunction = false;
                    $("#dlg").dialog('open');
                }
            });
            return false;
        }
    </script>
</head>
<body>
    <div style="display: none">
        <div id="dlg">
            <iframe src="" ></iframe>
        </div>
    </div>
    <button type="button" name="button1" id="button1" >Change Password</button>
</body>
</html>

И dialogContent.htm

<!DOCTYPE>
<html>
<head>
    <script type="text/javascript">
        $(function () {
            $("input[name='password']").focus();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table cellpadding="1" cellspacing="0" border="0">
            <tr>
                <td>Password</td>
                <td><input type="password" name="password" /></td>
            </tr>
            <tr>
                <td>New Password</td>
                <td><input type="password" name="password1" /></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><input type="password" name="password2" /></td>
            </tr>
        </table>
    </div>
    <br />
    <div align="right">
        <input type="submit" name="btnOK" value="Ok" />
        <input type="reset" name="btnCancel" value="Cancel" onclick="Close()" />
    </div>
    </form>
</body>
</html>

Я пытаюсь сосредоточиться на первом входе в диалог, которого не происходит. фактическим сфокусированным элементом является кнопка закрытия (вы можете проверить это, нажав enter, который закрывает диалог)

Обратите внимание, что содержимое диалогового окна находится внутри и iframe. Я не могу объединить содержимое диалога, вставив html непосредственно в тег div. обе страницы являются активными aspx-страницами и не могут быть просто объединены. Фактическое содержимое диалогового окна более сложное, чем несколько полей ввода, и может быть комбинацией datebox, dropdown, textarea multiselect, multiselect ,...

Обратите внимание: setTimeout не работает либо потому, что диалоговое окно ожидает, что страница вернет управление родительскому элементу, прежде чем открывать его

Вопрос: Как сфокусировать фокус перемещения на первый компонент в диалоговом окне (в этом случае ввод пароля)

  • 0
    Попробуйте $("#dlg").contents().find('input:first()').focus()
  • 0
    Правильным исправлением будет установка атрибута autofocus для первого элемента ввода в html, например input type=".." ... autofocus />
Показать ещё 2 комментария
Теги:

4 ответа

2
Лучший ответ

У меня была эта же проблема и в прошлом, jQuery перемещает фокус на первый элемент управления в диалоговом окне, который в вашем случае становится закрытой кнопкой вверху диалога. Поскольку jQueryUI не имеет доступа к содержимому IFRAME он не может автоматически найти ваш пароль. с другой стороны, я предполагаю, что у вас нет доступа к содержимому диалога от родителя (перекрестный домен может быть?).

Я думаю, что ваш вопрос должен быть, как НЕ сосредоточиться на первом элементе диалогового окна

Я нашел временное решение по этому вопросу, однако это не идеально.

Вы можете прочитать об этом в билете, отправленном в jQueryUI ошибка 4731 около 4 лет назад.

В комментарии предлагается использовать следующий код в основном файле (dialogTest.htm)

<script type="text/javascript">
    $(function(){
        $.ui.dialog.prototype._focusTabbable = function(){}; 
    }
</script>

Этот код отключит перемещение фокуса в диалоговом окне jQueryUI, и вы можете использовать сценарий фокуса, как и раньше, но вам также потребуется задержка.

<script type="text/javascript">
    $(function () {
        setTimeout(moveFocus, 500);
    });

    function moveFocus(){
        $("input[name='password']").focus();
    }
</script>

Однако, как я упоминал ранее, этот код не идеален. Задержка должна быть скорректирована для каждой страницы и снова, она не будет работать все время.

Поделиться
1

Для этого html5 имеет решение: используйте тег автофокуса в текстовом поле, которое вы хотите сфокусировать. http://diveintohtml5.info/forms.html имеет больше информации об этом. если вы не уверены, что ваш целевой браузер поддерживает автофокусировку, вы можете использовать резервную копию на той же странице.

Поделиться
  • 0
    Спасибо за ваш ответ и комментарии, вы пробовали это на деле, которое я предоставил? это сработало?
0

Вам нужно добавить атрибут autofocus в текстовое поле.

<input type="password" name="password" autofocus="autofocus"/>
Поделиться
  • 0
    Я не могу найти ничего существенного в autofocus . Какие браузеры поддерживают это?
  • 0
    проверить это: hscripts.com/tutorials/html5/autofocus-attribute.html
Показать ещё 3 комментария
-1

используя jQuery, вы можете сделать это следующим образом:

<script type="text/javascript">
window.onload = function() {
    $("input[name='password']").focus();
};
</script>

или

<script type="text/javascript">
$(document).ready(function() {
    $("input[name='password']").focus();
});
</script>
Поделиться
  • 0
    onload неправильный, onready правильный. Я дам вам +1, если вы можете сказать мне, почему :)
  • 0
    Событие load (также называемое «onload») для окна и / или элемента body будет запущено после загрузки всего содержимого страницы. Напротив, функция jquery $ (document) .ready (...) будет использовать механизм, специфичный для браузера, чтобы гарантировать, что обработчик будет вызван как можно скорее после загрузки и доступности HTML / XML dom.
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню