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
分享到：
相关推荐
javascript函数的解释，解释了具体函数的功能，一、函数JavaScript函数集合 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:...
参数myform指代验证的表单，可以比作验证树DOM的根，之后的JavaScript会遍历所有元素(elements)，逐个检验，若没有设置验证则直接跳过，若有一个验证不通过，都不会将表单提交，并将光标定位到该处(focus())，若有...
功能：使窗口中得到焦点。当与blur方法合用时必须小心，因为可能导致焦点不 断移进移出。 24. captureEvent方法 语法格式： window.captureEvent(Event) window.captureEvent(事件1|事件2|...|事件n) 功能：...
42.日期函数列表:dateObj.getTime()得到时间,dateObj.getYear()得到年份,dateObj.getFullYear()得到四位的年份,dateObj.getMonth()得 到月份,dateObj.getDate()得到日,dateObj.getDay()得到日期几,dateObj.getHours...
首先实现两个函数用来操作光标： 代码如下: // 得到一个文本框控件的当前光标位置 function getPos(obj) { obj.focus(); var workRange=document.selection.createRange(); obj.select(); var allRange=document....
当鼠标获得焦点 失去焦点的时候 input输入框文字处理： $ document ready function { $ "input text1" val "Enter your search text here" ; textFill $ "input text1" ; } ; ...
按属性添加钩子/脱钩生命周期事件不同，此包使您可以将简单的hook和unhook属性定义为普通函数。 例子 在此示例中，我们将构造10个文本输入框，并使用箭头键调整焦点。 我们可以使用一个简单的hook: function (elem) ...
Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...
eWebEditor的详细说明文档 1.5 系统要求.................................................................... 37 1.5.1 客户端要求 ................................................................