<Form><input>이 Ajax를 통해로드 된 경우 HTML5의 자동 포커스 속성이 FireFox에서만 작동하지 않습니다. 왜?

Question

아래는 아약스를 통해로드 된 양식입니다. 폼 페이지를 직접 실행하면 c_name의 자동 포커스가 파이어 폭스에서 작동하지만 아약스와 함께로드되면 자동 포커스가 작동하지 않습니다! 그것은 오페라/사파리/크롬과 함께 잘 작동한다!

<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

자동 초점은 onload가 시작되기 전에 완료됩니다. 이는 초기 페이지로드에 초점을 지정하는 선언적 방법을 의미합니다.

Answer 2

필자는 똑같은 문제가 있습니다. 적어도 최신 버전에서는 자동 초점 속성이 FF에서 작동하지 않습니다. 또한 양식이있는 팝업 창이 있습니다. Ajax는이 팝업 시작에 사용됩니다.

Discussion on webmasters.stackexchange.com

Another discussion on stackoverflow

하지만 자바 스크립트 해킹을 사용하여 제외하고는 더 이상 간단하고 좋은 찾고 해결책을 발견하지 않았습니다 :

나는이 링크가 당신에게 도움이 될 것입니다 바랍니다.

Answer 3

나는 이것이 오래되었다는 것을 알고 있지만 방금이 문제가 있었고 어쩌면 누군가를 도왔습니다. 당신이 jQuery를 사용하는 경우

이 작동합니다

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

자바 스크립트이 (일반적인 예) 같은 것이다 :

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

하지만 양식이 아약스를 통해로드 한 후이 함수를 호출해야 !

Answer 4

사용 사업부에 아약스 호출, 또는 사용 JQuery와 사용 .ajaxComplete 이후의 setTimeout 또는되는 .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(); 
}