41

将焦点设置到动态加载的 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 提取到displayDIV 中:

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

非常感谢!

4

9 回答 9

57

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

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

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

于 2009-09-16T16:17:33.750 回答
12

您是否尝试过简单地按 ID 选择?

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

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

于 2009-09-16T15:39:04.643 回答
9

是的,当操作一个尚不存在的元素时会发生这种情况(这里的一些贡献者也对唯一 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

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

于 2011-01-10T00:36:16.803 回答
3

如果

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

不起作用,那么您的页面上是否还有另一个元素的 id 为标题?

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

于 2009-09-16T16:16:18.483 回答
2

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

$(function() { $("#login-user-name").focus(); }); // jQuery rocks!
于 2011-06-23T14:51:05.863 回答
1

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

于 2010-06-18T20:02:10.507 回答
1

这在页面加载时运行。

<script type="text/javascript">
    $(function () {
        $("#header").focus();
    });
</script>
于 2012-05-03T14:23:43.027 回答
0
$("#header").attr('tabindex', -1).focus();
于 2012-05-18T12:11:43.137 回答
0
$(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); 查看 U 尝试设置的对象或功能。

于 2014-03-08T17:50:51.187 回答