Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 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>
like image 841
Vishu7 Avatar asked Mar 31 '12 11:03

Vishu7


People also ask

Which html5 form attribute can used to place focus on an input when the page loads?

The autofocus attribute is a boolean attribute. When present, it specifies that an <input> element should automatically get focus when the page loads.

Does autofocus attribute always set focus on first input field in html5?

The first input or textarea in source order that has the autofocus attribute will be focused on page load. In browsers without autofocus support, no fields will be focused on page load, unless otherwise given focus with JavaScript.

What does the html5 autofocus attribute do when applied to the HTML select element?

The autofocus attribute is a boolean attribute. When present, it specifies that the drop-down list should automatically get focus when the page loads.

Which element does not support autofocus attribute?

8. Which of the following element does not support autofocus attribute? <base> does not support autofocus attribute.


3 Answers

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

like image 179
Boris Zbarsky Avatar answered Sep 27 '22 19:09

Boris Zbarsky


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();
 }
like image 35
Densol Avatar answered Sep 27 '22 19:09

Densol


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!

like image 28
kinske Avatar answered Sep 27 '22 19:09

kinske