纠结了很久,终于把这个问题解决了!之前在动态构建这个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,同样能正常工作,可见那个延时的作用只是让页面立即重绘