Атрибут автофокуса HTML5 не работает только в FireFox, когда ‹Form›‹input› загружается через Ajax. ПОЧЕМУ?

Ниже приведена форма, которую я загрузил через ajax. Когда я запускаю страницу формы напрямую, автофокус на c_name работает в Firefox, но при загрузке с помощью ajax это не так! Однако он отлично работает с Opera/Safari/Chrome!

<form action="client_entry_action.php" method="post" id="client_entry_form" name="client_entry_form">

<fieldset id="client_info_1">

    <label for="c_name">Name:</label> 
    <input type="text" name="c_name" required placeholder="Name" autofocus="autofocus" />

    <label for="c_phone">Phone Number:</label> 
    <input type="tel" name="c_phone" required placeholder="Mobile/Phone Number" />

    <label for="c_email">Email:</label> 
    <input type="email" name="c_email" required placeholder="[email protected]" />

    <label for="c_address">Address:</label> 
    <textarea name="c_address" ></textarea>


</fieldset>

<fieldset id="client_info_2">   

    <label for="c_info">Additional notes:</label> 
    <textarea name="c_info" ></textarea>

    <input type="submit" name="add_client" value="Add Client" />

</fieldset>        

</form>

html ajax firefox autofocus
person Vishu7    schedule 31.03.2012    source источник

Ответы (5)


arrow_upward
6
arrow_downward

Автофокус выполняется только до срабатывания загрузки; это должен быть декларативный способ указать фокус на начальной загрузке страницы.

person Boris Zbarsky    schedule 31.03.2012
comment
Однако он отлично работает с Opera/Safari/Chrome! Не могли бы вы уточнить немного больше? - person Vishu7; 01.04.2012
comment
Спецификация не определяет точное поведение атрибута, поэтому все задействованные реализации на самом деле соответствуют спецификации. Спецификация действительно описывает общую идею, но разные браузеры по-разному интерпретируют то, к какому поведению это должно привести. - person Boris Zbarsky; 02.04.2012

arrow_upward
5
arrow_downward

используйте settimeout после вызова ajax для div или с помощью jquery используйте .ajaxComplete или .done

function theAjax(){
//after the ajax actions loaded......
//use settimeout to refocused on the input..
var t=setTimeout("focusMe()",500);

}

function focusMe(){
document.getELementById("theInput").focus();  //the new input

}

//using jquery use .ajaxComplete, or .done
 $( document ).ajaxComplete(function() {
   $("#focusOnMe").focus();
 }
person Densol    schedule 24.07.2014

arrow_upward
3
arrow_downward

Я знаю, что это старо, но у меня только что была эта проблема, и, возможно, это кому-то поможет.

Если вы используете jQuery, это работает:

$("input[name='c_name']").focus();

Javascript будет примерно таким (общий пример):

document.getElementById('element').focus();

Но вы должны вызывать эту функцию после того, как ваша форма загружена через ajax!

person kinske    schedule 21.10.2013

arrow_upward
0
arrow_downward

У меня абсолютно такая же проблема: не работает атрибут Автофокус в ФФ, по крайней мере в последней версии. У меня также есть всплывающее окно с формой. Для запуска этого всплывающего окна используется Ajax.

Надеюсь, эти ссылки будут вам полезны:

Обсуждение на webmasters.stackexchange.com

Еще одно обсуждение stackoverflow

Но я не нашел более простого и красивого решения, кроме использования хаков javascript.

person JuliaCesar    schedule 01.11.2012

arrow_upward
0
arrow_downward

Это сработало для меня:

$.get("/url.html", function(html) {
    var form = $("#form", html);// extract form with id=form from ajax response
    if (window.InstallTrigger) {// Detect Firefox and add focus script
        // place focus on first element containing autofocus attribute
        form.append("<script>$('[autofocus]')[0].focus();<\/script>");
    }
    $("#element").replaceWith(form);// Replace element with id=element with form
});

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

Обратите внимание, что для этого решения требуется jQuery. Если вы не используете jQuery, вы все равно можете сделать это достаточно легко с помощью querySelectorAll

document.getElementById("element").innerHTML = form+"<script>document.querySelectorAll('[autofocus]')[0].focus()<\/script>"
person PHP Guru    schedule 23.10.2020