Autofocus Attribute of HTML5 does not work only in FireFox when <Form><input> are loaded via Ajax. WHY?

Question

Below is the form which i loaded via ajax. When i run the form page directly then autofocus on c_name works in firefox but when loaded with ajax it doesn't! It works fine with opera/safari/chrome though!

<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

Autofocus is only done before onload has fired; it's meant to be a declarative way of specifying focus on initial page load.

Answer 2

use settimeout after ajax call on the div, or using jquery use .ajaxComplete, or .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();
 }

Answer 3

I know this is old, but I just had this problem and maybe it helps someone.

If you use jQuery this works:

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

Javascript would be something like this (general example):

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

But you have to call that function after your form is loaded via ajax!

Answer 4

I have the absolutely same problem: the Autofocus attribute doesn't work in FF, at least in the latest version. I also have a pop-up window with a form. Ajax is used for this pop-up initiation.

I hope these links will be helpful to you:

Discussion on webmasters.stackexchange.com

Another discussion on stackoverflow

But I haven't found out any more simple and good looking solution except by using javascript hacks.