Javascript，focus()函数不能使输入框获得焦点 -优快云博客

本文链接：https://blog.youkuaiyun.com/stevenbill/article/details/83835546

本文探讨了在使用JavaScript时，如何解决通过innerHTML动态添加的输入框无法自动获得焦点的问题，并提供了有效的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Javascript，focus()函数不能使输入框获得焦点
悬赏分：100 | 解决时间：2010-11-20 20:38 | 提问者：kennykinte 代码如下：【纯HTML+Javascript】
<html>
<head>
<title>notitle</title>
</head>
<script language="javascript">
function ai(){
if (event.keyCode ==13){
document.getElementById('ad').innerHTML+="input:<input type='text' name='bb' id='bb' onkeypress='ai()'/><br>";
document.getElementById('bb').focus();
}
}
</script>
<body onload="document.getElementById('aa').focus();">
<form id="form1" name="form1" method="post" action="2.asp">
<div id="ad">
input:<input type="text" name="aa" id="aa" onkeypress="ai()"/> <br>
</div>
<input type="button" name="button" id="button" value="submit" onclick="document.getElementById('bb').focus();" />
<input type="text" name="textfield" style="visibility:hidden" />
</form>
</body>
</html>
在页面第一个输入框里按下回车后，可以增加一个输入框，但是却不能让新增的输入框获得焦点。
从代码实现角度来说：第一个输入框有按键盘动作后，触发Javascript函数ai()，此函数检查键盘动作，若是回车，则使用InnerHTML追加一个输入框，此新输入框的id和name都是"bb"，然后，执行Javascript语句：document.getElementById('bb').focus();
按理说，应该能把bb输入框（也就是新增的输入框）得到焦点，但是实际运行中不能获得输入焦点。
请大侠指点指点。问题补充：

我在csdn上看到高手的解决方案了，大家可以参考下：
function ai(){
if (event.keyCode ==13){
var frag = document.createDocumentFragment();
var tag = document.createTextNode("input:");
var input = document.createElement("input");
input.type="text";
input.name="bb";
input.id="bb";
input.onkeypress = ai;
var br = document.createElement("br");
frag.appendChild(tag);
frag.appendChild(input);
frag.appendChild(br);
document.getElementById("ad").appendChild(frag);
document.getElementById('bb').focus();
}
}
一楼的也谢谢你啦

最佳答案你可以看看这个，也许能帮助你明白为什么你原来的方法不行，但是用另一种方法就可以。http://hi.baidu.com/xizhilang6688/blog/item/9ca1c4fe34899d3d5d600869.html
当你使用innerHTML的时候dom 会重绘，重绘意味着那些focus全部不起作用。
至于为什么appendChild 可以呢，是因为你添加的节点不会影响其他的节点。不会造成重绘。
重绘是需要时间的，所以问题就这么产生了。对我有帮助
0