Atrybut autofokusa HTML5 nie działa tylko w FireFox, gdy <Form><input> jest ładowany przez Ajax. CZEMU?

Question

Poniżej znajduje się formularz, który załadowałem za pomocą ajax. Kiedy uruchamiam stronę formularza bezpośrednio, autofokus na c_name działa w firefoxie, ale gdy jest załadowany ajaxem, nie działa! Działa to dobrze z opery/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@example.com" /> 

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

Answer 1

Autofokus jest wykonywany tylko przed uruchomieniem ładowania; ma to być deklaratywny sposób określania fokusu na początkowym ładowaniu strony.

Answer 2

Mam absolutnie ten sam problem: atrybut Autofocus nie działa w FF, przynajmniej w najnowszej wersji. Mam również wyskakujące okno z formularzem. Ajax jest używany do tej wyskakującej inicjacji.

Mam nadzieję, że te linki będą pomocne dla Ciebie:

Discussion on webmasters.stackexchange.com

Another discussion on stackoverflow

Ale nie znalazłem jakichkolwiek bardziej proste i dobre rozwiązanie patrząc z wyjątkiem za pomocą hacków javascript.

Answer 3

Wiem, że to jest stare, ale właśnie miałem ten problem i może to pomaga komuś.

Jeśli używasz jQuery to działa:

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

JavaScript byłoby coś takiego (ogólny przykład):

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

Ale trzeba wywołać tę funkcję po twoja postać jest ładowany za pośrednictwem ajax !

Answer 4

użycie setTimeout po wywołaniu ajax na div lub przy użyciu użyć jQuery .ajaxComplete lub .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(); 
}