Question

下面是我通过ajax加载的表单。当我直接运行表单页面然后自动对焦c_name在Firefox中工作但是当加载ajax时它不会！虽然它与opera / 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

自动对焦仅在onload触发之前完成;它意味着一种声明性的方式来指定对初始页面加载的关注。

Answer 2

在div上调用ajax之后使用settimeout，或者使用jquery使用.ajaxComplete或.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

我知道这已经过时了，但我遇到了这个问题，也许这对某人有所帮助。

如果您使用jQuery，则可以使用：

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

Javascript就是这样的（一般例子）：

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

但是你必须在通过ajax加载表单后调用该函数！

Answer 4

我有完全相同的问题：自动对焦属性在FF中不起作用，至少在最新版本中是这样。我还有一个带表单的弹出窗口。 Ajax用于此弹出启动。

我希望这些链接对您有所帮助：

Discussion on webmasters.stackexchange.com

Another discussion on stackoverflow

但除了使用javascript hacks之外，我还没有找到任何更简单，更好看的解决方案。

Answer 5

这对我有用：

$.get("/url.html", function(html) {
    var form = $("#form", html);// extract form with id=form from ajax response
    if (window.InstallTrigger) {// Detect Firefox and add focus script
        // place focus on first element containing autofocus attribute
        form.append("<script>$('[autofocus]')[0].focus();<\/script>");
    }
    $("#element").replaceWith(form);// Replace element with id=element with form
});

这与此处发布的其他解决方案不同，因为将焦点放在autofocus元素上的脚本与autofocus元素本身同时添加到DOM，从而确保脚本在DOM完成更新后运行。

请注意，此解决方案需要jQuery。如果您不使用jQuery，则仍然可以通过querySelectorAll

轻松完成此操作

document.getElementById("element").innerHTML = form+"<script>document.querySelectorAll('[autofocus]')[0].focus()<\/script>"

自动对焦当通过Ajax加载<form> <input />时，HTML5的属性不仅适用于FireFox。为什么？</FORM>

5 个答案: