Javascript，focus()为何不能使InnerHTML方式新增的文本输入框获得输入焦点？

如代码，纯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>大家请看，运行后页面本身有个文本输入框，id为"aa"，此输入框检测键盘动作，触发JS函数ai().
ai()函数：若键盘动作为回车键，则在 <div id="ad">内追加一个文本输入框，id为"bb"，然后执行语句：
document.getElementById('bb').focus();
也就是让新增加的那个文本框获得焦点。
但是运行中，却不能使得"bb"获得焦点。我特意在submit按钮上也做了个onclick触发=
onclick=document.getElementById('bb').focus();
大家看，FUCK了，不是和ai()里的语句一模一样么！但是这个onclick却可以使得"bb"获得输入焦点！而ai()里的不能。
求教这是为什么？
我想实现的功能就是文本框输入内容，并回车后，能新加一个文本框，并自动获得焦点。
求大侠指教！

解决方案 »

  1.   


    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();
      }
    }
      

  2.   

    其实你的问题在于 你focus()的时候浏览器本身还没来得及draw
      

  3.   

    我靠，怎么看楼主的代码有点递归的味道？
    onkeypress 一执行，你的控件就重复了啊，多个控件ID相同
      

  4.   

    cj205 大大我太崇拜你了，一举搞定我头大的问题~谢谢了，结贴了，分都给您~
    其实，还有点小问题还没搞定，就是我新增的文本框id都是"bb"，有没有什么较好的办法，例如数组的形式什么的命名id？
    然后ai()能够使得焦点在正确的文本框内，而不是第一个"bb"…
    大侠要是不嫌烦的话，帮我下啦，谢谢~
      

  5.   

    1、"bb"的Id重复 document.getElementById() 是根据id取得都没dom对象，在调用focus() 方法的。
    你这样添加 会添加多个重复的id 无法取到相应的都没对象2、可以用  document.createElement(),创建一个都没对象，再通过 appendChild 方式添加到节点中。接着调用这个对象的focus() 方法就可以了。3、我该写的如下 你可以参考下：<html>
    <head>
      <title>notitle</title>
    </head>
    <script language="javascript">
    function ai(){
      if (event.keyCode ==13){
      
        var adObj = document.getElementById('ad');
        
        var inputObj = document.createElement("input");
        inputObj.attachEvent("onkeypress",ai);
      
        
        var textObj = document.createElement("span");
        textObj.innerText = "input";
        
        var brObj = document.createElement("br");
        
        adObj.appendChild(textObj);
        adObj.appendChild(inputObj);
        adObj.appendChild(brObj);
       
        inputObj.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>
      

  6.   

    6F的loehuang大侠也很高明啊，而且解决了我在5F的问题，太佩服你了。
    CSDN高手真多~
      

  7.   

    var 一个全局变量i
    然后每次id="dd"+i.toString();
    i++;这样就可以了~~
      

  8.   

    如果可以省略id可以这样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);
        input.focus();
      }
    }