Question

我正在向div标签动态添加4个文本框。目的是获取IP地址。如下，

<input type="text"  id='ip1' />
<input type="text"  id='ip2' />
<input type="text"  id='ip3' />
<input type="text"  id='ip4' />

我正在做的是，

在keyup事件中，我正在检查它的长度，所以如果它是'3'，我必须关注下一个文本框。希望你明白我要做的事。

Jquery代码：

$(document).on('keyup','#ip1', function(e){
        if($(this).val().length>=3)
        $("#ip3").focus();
 });

在上面的代码中，如果第一个框长度达到3位数，则假设要聚焦第二个文本框#ip2。但它不起作用，因为我已经动态添加了这些字段。所以，我的问题是，

如何关注动态生成的文本字段？

Answer 1

您可以尝试绑定on事件而不是焦点。

<强> Live Demo

更改

$(doucment).on(focus,'#ip2');

到

$('#ip2').focus();

不是对事件绑定和焦点代码进行硬编码，而是将其设为通用。

$(document).on('keyup','[id^=ip]', function(e){
        if($(this).val().length>=3)
        $(this).next().focus();
});

Answer 2

您还可以在文本字段中添加额外的属性，因此您只需要定义一个jQuery事件来完成所有工作：

<input type="text"  id='ip1' next="ip2" />
<input type="text"  id='ip2' next="ip3" />
<input type="text"  id='ip3' next="ip4" />
<input type="text"  id='ip4' next="-" />

JS：

$(document).on('keyup','input', function(e){
        if($(this).val().length>=3 && $(this).attr('next') != '-' )
          $('#'+$(this).attr('next')).focus();
});

http://jsfiddle.net/gp2Mk/

Answer 3

当动态添加为

时，您可以为各个字段绑定'keyup'

$("#ip3").keyup(function(){ $('#ip4').focus(); });

在keyup事件时，我无法将（）聚焦在文本字段上

3 个答案: