2012-03-31 1 views
6

Ниже представлена ​​форма, которую я загрузил через ajax. Когда я запускаю страницу формы напрямую, автофокусировка на c_name работает в firefox, но при загрузке с помощью ajax это не так! Он отлично работает с оперным/сафари/хром!Автофокус Атрибут HTML5 не работает только в FireFox, когда <Form><input> загружаются через Ajax. ЗАЧЕМ?

<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> 

ответ

6

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

+0

Он отлично работает с оперой/safari/chrome, хотя! Не могли бы вы рассказать немного больше? – Vishu7

+5

Спецификация не определяет точное поведение для атрибута, поэтому все задействованные реализации на самом деле соответствуют спецификации. Спецификация _does_ описывает, какова общая идея, но разные браузеры интерпретируют, какое поведение должно вести по-разному. –

0

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

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

Discussion on webmasters.stackexchange.com

Another discussion on stackoverflow

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

1

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

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

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

Javascript будет что-то вроде этого (общий пример):

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

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

5

использование 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(); 
}