使用jQuery追加输入框后实现自动聚焦的问题及解决方法

我明白你的困扰——追加输入框后没法自动聚焦确实有点烦人，我来帮你搞定它！

问题出在哪？ #

你之前用的$('.fields').append(field_html).focus()之所以无效，是因为append()方法返回的是容器本身（.fields），而不是你刚添加的输入框。给容器调用focus()自然不会让输入框获得焦点啦。

两种可行的解决方案 #

方案1：追加后定位到新输入框再聚焦

只需要在追加后，找到刚添加的那个.input元素，再调用focus()就可以了：

$('button').on('click', function(e){
 var field_html = $('.row').html();
 $('.fields').append(field_html);
 // 找到容器里最后一个.input元素并聚焦
 $('.fields .input:last').focus();
});

或者把链式调用写在一起，更简洁：

$('button').on('click', function(e){
 var field_html = $('.row').html();
 $('.fields').append(field_html).find('.input:last').focus();
});

方案2：克隆元素再追加（更稳妥）

比起直接复制HTML字符串，克隆原输入框元素的方式更可靠，能保留元素的所有属性和事件（如果后续需要添加事件监听的话）：

$('button').on('click', function(e){
 // 克隆隐藏row里的输入框
 var newInput = $('.row .input').clone();
 // 追加到容器
 $('.fields').append(newInput);
 // 直接给克隆的元素聚焦
 newInput.focus();
});

完整可运行代码 #

更新后的完整代码如下：

HTML

<div class="fields">
 <!-- 输入框会追加到这里 -->
</div>
<div class="row">
 <input name="input" class="input">
</div>
<button>Add</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CSS

.input{
 padding: 10px 10px;
 border: 1px solid blue;
 width: 300px;
 margin-bottom: 10px;
}
.row {
 display: none;
}

JavaScript

$('button').on('click', function(e){
 var newInput = $('.row .input').clone();
 $('.fields').append(newInput);
 newInput.focus();
});

关键注意点 #

一定要确保输入框已经被添加到DOM树中再调用focus()，如果元素还没渲染到页面上，focus()是不会生效的。上面两种方案都是先把元素追加到DOM，再执行聚焦，所以能正常工作。

内容的提问来源于stack exchange，提问作者Jay.