7

下面是我通过 ajax 加载的表单。当我直接运行表单页面时，在 c_name 上的自动对焦在 firefox 中有效，但在加载 ajax 时却不行！不过，它适用于歌剧/野生动物园/铬！

<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>
4

5 回答 5

6

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

于 2012-03-31T14:53:24.567 回答
5

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();
 }
于 2014-07-24T13:25:13.580 回答
3

我知道这很旧，但我只是遇到了这个问题，也许它可以帮助某人。

如果您使用 jQuery，这可行：

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

Javascript 将是这样的（一般示例）：

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

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

于 2013-10-21T13:19:40.163 回答
0

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

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

关于 webmasters.stackexchange.com 的讨论

关于stackoverflow的另一个讨论

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

于 2012-11-01T12:55:11.483 回答
0

这对我有用：

$.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
});

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

请注意，此解决方案需要 jQuery。如果您不使用 jQuery，您仍然可以使用 querySelectorAll 轻松完成此操作

document.getElementById("element").innerHTML = form+"<script>document.querySelectorAll('[autofocus]')[0].focus()<\/script>"
于 2020-10-23T18:12:47.723 回答