动态添加dom元素(innerHTML方式)时focus()在第二次时会失效的解决办法

       纠结了很久，终于把这个问题解决了！之前在动态构建这个innerHTML内容时，第一次光标可以自动定位到文本框中,但是在第二次构造的时候就失效了。最后终于在一个网站上瞅到了解决办法。非常感谢blueidea的misshjn网友提出的问题，也非常感谢mozart0这位网友给出的解答，直接帮我解决了这个困惑。引用地址：http://bbs.blueidea.com/thread-2608749-1-1.html

我自己的代码(修改之前)：区别就在于以下蓝色的部分

function getPointPosition_js(str) {
 var arrays = str.split(",");
 divId=arrays[0];
 var lat=arrays[1];
 var lon = arrays[2];
 var screenX = arrays[3]-25;
 var screenY = arrays[4]-140;
 if(screenX>600)
  screenX = 600;
 if(screenY>521)
  screenY = 521;
 document.getElementById("show").style.visibility="visible";
 document.getElementById("show").innerHTML = '<div style="background-image:url('+'../map/images/gundongpanel2.png'+');text-align: center;width: 126px;height: 99px;position:absolute;z-index:10;top:'+screenY+'px;left:'+screenX+'px;">'
 +'<div style="padding-top:15px;font-size:14px;">'
 +"<b>地理名称</b>"+'<br/><input type="text" id="addressName" style="width: 80px;"/>'+'<br/>'
 +'<div style="padding-top:8px;">'
 +'<input type="submit" style="font-size:12px;" value="保存" οnclick="baocunPoin('+lat+','+lon+')"/>'
 +'<input type="button" style="font-size:12px;" value="取消" οnclick="closed(divId)"/>'
 +'</div>'
 +'</div>'
 +'</div>';
 document.getElementById("addressName").focus();
}

我自己的代码(修改之后)：

function getPointPosition_js(str) {
 var arrays = str.split(",");
 divId=arrays[0];
 var lat=arrays[1];
 var lon = arrays[2];
 var screenX = arrays[3]-25;
 var screenY = arrays[4]-140;
 if(screenX>600)
  screenX = 600;
 if(screenY>521)
  screenY = 521;
 document.getElementById("show").style.visibility="visible";
 document.getElementById("show").innerHTML = '<div style="background-image:url('+'../map/images/gundongpanel2.png'+');text-align: center;width: 126px;height: 99px;position:absolute;z-index:10;top:'+screenY+'px;left:'+screenX+'px;">'
 +'<div style="padding-top:15px;font-size:14px;">'
 +"<b>地理名称</b>"+'<br/><input type="text" id="addressName" style="width: 80px;"/>'+'<br/>'
 +'<div style="padding-top:8px;">'
 +'<input type="submit" style="font-size:12px;" value="保存" οnclick="baocunPoin('+lat+','+lon+')"/>'
 +'<input type="button" style="font-size:12px;" value="取消" οnclick="closed(divId)"/>'
 +'</div>'
 +'</div>'
 +'</div>';
 setTimeout('document.getElementById("addressName").focus()',100);
}

 

下面是mozart0网友的猜测，我觉得很有道理，粘过来：

个人有两种猜测，但都有漏洞：
1.你改变了一个元素的innerHTML，浏览器需要一定的时间来解析这个innerHTML，更新文档树，重绘页面，在这些工作完成之前，当然不能focus
2.浏览器重绘页面的原则是尽可能多的减少次数，对于
{
test.innerHTML += "<li><input type=text></li>";
test.lastChild.firstChild.focus();
}
两条语句全部执行后，浏览器才重绘页面，导致第二条语句不能正常执行。把上面给的代码里延时改为1,同样能正常工作，可见那个延时的作用只是让页面立即重绘