将焦点设置到动态加载的DIV中的字段

Question

如何在动态加载的 DIV 中将焦点设置到特定字段？

$("#display").load("?control=msgs"); // loads the HTML into the DIV
$('#display').fadeIn("fast"); // display it
$("tex#header").focus();          // ?? neither that
$("input#header").focus();        // ?? nor that
$('#display', '#header').focus()  // ?? nor that
$("#header").focus();             // ?? nor that works

以下HTML被获取并显示在display DIV中：

<div id="display">
<form id="newHeaderForm" class="dataform" action="/" method="post">
    <input id="to" type="hidden" value="22" name="to"/>
    <dl>
        <dt>Header</dt>
        <dd>
            <input id="header" class="large" type="text" name="header" value="" maxlength="128"/>
        </dd>
 </form>
 </div>

非常感谢！

- MrG

---

您可以展示一下生成的 HTML 吗？ - Bela

$('#display', '#header').focus() 应该可以工作。 - orip

Answer 1

load()函数是异步函数。你应该在load()调用完成后设置焦点，也就是在load()的回调函数中设置，否则你所引用的#header元素还不存在。例如：

$("#display").load("?control=msgs", {}, function() { 
  $('#header').focus();
}); 

我自己使用这个解决方案时也遇到了问题，所以在回调函数中使用了setTimeout，并设置了在超时后将焦点设置到元素上，以确保元素确实存在。

- Jan Willem B

---

我经常看到这样的解决方案，涉及DOM和“准备就绪”的棘手场景。难道没有其他选择，只能调用setTimeout并希望它足够吗？在我看来，这种方法注定会间歇性地失败。最近我的一个问题中提出了这个问题：https://dev59.com/tGEi5IYBdhLWcg3whcri - EleventyOne

超时函数也存在于Angular中。其他语法，但解决方案相同。感谢您通过超时函数将我引入正确的轨道。 $timeout(function () { $window.document.getElementById('name').focus(); }); - Michel

Timeout 中适当的时间为 0；目的是在 <div> 创建代码完成后立即安排 'focus()' 代码运行。请参见 https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop - Stephen Leake

Answer 2

你尝试过直接按ID选择吗？

$("#header").focus();

由于 id 应该是唯一的，因此不需要使用更具体的选择器。

- Paul Suart

Answer 3

是的，当操作尚不存在的元素时会出现这种情况（这里的一些贡献者也提到了唯一的ID这个好点）。我遇到了类似的问题。我还需要向即将呈现的元素的函数传递一个参数。

这里勾选的解决方案对我没有帮助。最后我找到了一个可以直接使用的解决方案。而且它非常漂亮 - 一个回调函数。

不要使用：

$( '#header' ).focus();
or the tempting:
setTimeout( $( '#header' ).focus(), 500 );

试试这个：

setTimeout( function() { $( '#header' ).focus() }, 500 );

在我的代码中，测试传递参数时，这种方式行不通，超时被忽略了：

setTimeout( alert( 'Hello, '+name ), 1000 );

这个有效，超时滴答：

setTimeout( function() { alert( 'Hello, '+name ) }, 1000 );

很遗憾w3schools没有提到它。

鸣谢：makemineatriple.com。

希望这能对来到这里的人有所帮助。

- Arta

---

即使在调用.focus()之前元素已经存在，setTimeout似乎仍然有所帮助。500的值可能有些夸张了，不过对我来说10就足够了 :) - Nick

Answer 4

如果

$("#header").focus();

如果无法运行，请检查页面上是否有另一个ID为“header”的元素？使用Firebug运行 $（“#header”）并查看返回值。

- Bela

Answer 5

Omu指出，您必须在文档准备好函数中设置焦点。jQuery为您提供了此功能。并且要选择一个id进行操作。例如，如果您有一个登录页面：

$(function() { $("#login-user-name").focus(); }); // jQuery rocks!

- Per Lindberg

Answer 6

这个在页面加载时运行。

<script type="text/javascript">
    $(function () {
        $("#header").focus();
    });
</script>

- IAmGroot

Answer 7

动态添加的项目必须添加到DOM中... clone().append() 将其添加到DOM中... 这样就可以通过jquery进行选择。

- BCnuckles

Answer 8

$(function (){
    $('body').on('keypress','.sobitie_snses input',function(e){
        if(e.keyCode==13){
            $(this).blur();
            var new_fild =  $(this).clone().val('');
            $(this).parent().append(new_fild);
            $(new_fild).focus();
        }
    });
});

大多数错误是因为您使用了错误的对象来设置属性或函数。使用console.log(new_fild);查看您尝试设置属性或函数的对象。

- skinny

Answer 9

$("#header").attr('tabindex', -1).focus();

- ashu