The HTML5 autofocus attribute works not only in FireFox when <Form> <input> is loaded via Ajax. WHAT FOR?

Question

Below is the form I downloaded via ajax. When I launch the form page directly, autofocus on c_name works in firefox, but when loading with ajax it is not! It works great 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=" [e-mail] " /> <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 performed only before starting onload; this meant a declarative way of indicating focus on loading the start page.

Answer 2

use setimeout after calling ajax in a div or use jquery to 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 had this problem and maybe it helps someone.

If you use jQuery, this works:

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

Javascript will be something like this (general example):

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

But you must call this function after your form is loaded via ajax!

Answer 4

I have the same problem: the Autofocus attribute does not work in FF, at least in the latest version. I also have a form popup. Ajax is used for this pop up initiation.

I hope these links help you:

Discussion on webmasters.stackexchange.com

fooobar.com/questions/877505 / ...

But I did not find a simpler and more beautiful solution, except using javascript hacks.