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

【问题标题】：Set focus to field in dynamically loaded DIV将焦点设置到动态加载的 DIV 中的字段
【发布时间】：2009-09-16 15:33:23
【问题描述】：

将焦点设置到动态加载的 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>

非常感谢！

【问题讨论】：

你能不能给我们看看生成的html？
$('#display', '#header').focus() 应该可以工作

标签： jquery html focus setfocus

【解决方案1】：

load() 函数是一个异步函数。您应该在 load() 调用完成后设置焦点，即在 load() 的回调函数中，否则您通过#header 引用的元素尚不存在。例如：

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

即使使用这个解决方案我自己也遇到了问题，所以我在回调中做了一个 setTimeout 并将焦点设置在超时中以确保/真正/确保元素存在。

【讨论】：

我不断看到这样的解决方案，涉及涉及 DOM 和“准备就绪”的棘手场景。除了在任意时间内调用setTimeout 并希望它就足够了，难道没有其他选择吗？在我看来，这种方法注定会间歇性地失败。这个问题最近在我的一个问题中提出：stackoverflow.com/questions/21191336/…
超时功能也出现在 Angular 中。其他语法，但相同的解决方案。感谢您让我在超时的情况下走上正轨。$timeout(function () { $window.document.getElementById('name').focus(); });
Timeout中合适的时间为0；目的是安排“focus()”代码在
创建代码完成后立即运行。见developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

【解决方案2】：

您是否尝试过简单地按 Id 选择？

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

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

【讨论】：

【解决方案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。

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

【讨论】：

即使在调用.focus() 之前元素确实存在时，setTimeout 似乎也有帮助。不过，500 的值可能被夸大了。 10 对我来说效果很好:)

【解决方案4】：

如果

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

不工作，那么您的页面上是否还有另一个元素的 id 为 header？

使用 firebug 运行 $("#header") 并查看它返回的内容。

【讨论】：

【解决方案5】：

正如 Omu 指出的，您必须将焦点设置在文档就绪功能中。 jQuery 为您提供了它。并选择一个ID。例如，如果您有一个登录页面：

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

【讨论】：

【解决方案6】：

这在页面加载时运行。

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

【讨论】：

【解决方案7】：

必须将动态添加的项目添加到 DOM...clone().append() 将其添加到 DOM...这允许通过 jquery 选择它。

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

$(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);看看你尝试设置什么对象或功能。

【讨论】：