双击文字出现可编辑的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
<meta name="author" content="wuleying" />   
<title>双击文字出现编辑文本框的JS代码</title>   
<style>   
input.a {border:0px;}   
input.b {border:1px solid #369;background:#fff;}   
</style>   
</head>   
<body>   
<input class="a" id="test" readonly value="点我一下可以编辑我" type="text" />   
<input class="a" id="test2" readonly value="点我一下可以编辑我" type="text" />   
<script type="text/javascript">   
var test = document.getElementById("test");   
var test2 = document.getElementById("test2");  
test.ondblclick = function()   
{   
this.readOnly = false;   
this.className = "b";   
}   
test.onblur = function()   
{   
test.readOnly = true; //不可编辑状态   
test.className = "a";   
}   
test2.ondblclick = function()   
{   
this.readOnly = false;   
this.className = "b";   
}   
test2.onblur = function()   
{   
test2.readOnly = true; //不可编辑状态   
test2.className = "a";   
}  
</script>   
</body>   
</html>
这样不就是多个了。

解决方案 »

  1.   

    我添加了一个 id="test2"的文本框为什么我循环JS效果就没有了？<script type="text/javascript">  
    for(var i=1;i<2;i++){
        var test = document.getElementById("test"+[i]);    
       test[i].ondblclick = function()    
       {    
       this.readOnly = false;      
       this.className = "b";    
       }    
       test[i].onblur = function()    
       {    
       test[i].readOnly = true;   //不可编辑状态    
       test[i].className = "a";    
       }
    }    
    </script>  
      

  2.   

    var test = document.getElementById("test"+[i]);    
    这个获取文本对象本身就错了
    var test = document.getElementById("test"+i);
      

  3.   

    可直接对同名的文本框操作如：
    <input class="a" name="test" readonly value="点我一下可以编辑我" type="text" /> 
    <input class="a" name="test" readonly value="点我一下可以编辑我" type="text" />
    <script type="text/javascript"> /*  
    function enabledD(){
    var test = document.getElementsByName("test");
    for(var i=0;i<test.length;i++){   
      test[i].ondblclick = function()   
      {   
      this.readOnly = false;   
      this.className = "b";   
      }   
      test[i].onblur = function()   
      {   
      test[i].readOnly = true; //不可编辑状态   
      test[i].className = "a";   
      }
    }}   
    enabledD();
    </script>
      

  4.   

    <input class="a" name="test" readonly value="点我一下可以编辑我" type="text" />  
    <input class="a" name="test" readonly value="点我一下可以编辑我" type="text" />
    <script type="text/javascript"> /*   
    function enabledD(){
    var test = document.getElementsByName("test");
    for(var i=0;i<test.length;i++){   
    test[i].ondblclick = function()   
    {   
    this.readOnly = false;   
    this.className = "b";   
    }   
    test[i].onblur = function()   
    {   
    // 这个地方修改下就正常 了
    //test[i].readOnly = true; //不可编辑状态   
    //test[i].className = "a";   
     this.readOnly = true; //不可编辑状态   
     this.className = "a";
    }
    }}   
    enabledD();
    </script><center><br>======// 这个地方修改下就正常 了
    //test[i].readOnly = true; //不可编辑状态   
    //test[i].className = "a";   
     this.readOnly = true; //不可编辑状态   
     this.className = "a";======</center>
      

  5.   

    你的代码可以这样修改，修改后就正常了：
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
    <html xmlns="http://www.w3.org/1999/xhtml">   
    <head>   
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
    <meta name="author" content="wuleying" />   
    <title>双击文字出现编辑文本框的JS代码</title>   
    <style>   
    input.a {border:0px;}   
    input.b {border:1px solid #369;background:#fff;}   
    </style>   
    </head>   
    <body>   
    <input class="a" id="test1" readonly value="点我一下可以编辑我" type="text" />   
    <input class="a" id="test2" readonly value="点我一下可以编辑我" type="text" />   
    <script type="text/javascript">   
    for(var i=1;i<3;i++){
     //document.getElementById("") 这个获取的是单个对象本身，  所以也跟本不存在 test[i]对象
     // 你得去查下这些获取对象最基本方法的意思和使用方法
     // getElementById（"test"）,getElementsByName("test");
     // var test = document.getElementById("test"+[i]);   
     // test[i].ondblclick = function()  
      var test = document.getElementById("test"+i);   
      test.ondblclick = function()   
      {   
      this.readOnly = false;   
      this.className = "b";   
      }   
      test.onblur = function()   
      {   
    // test[i].readOnly = true; //不可编辑状态   
    // test[i].className = "a";  
    //当文本框ONBLUR事件触发时，调用这个方法，
    //执行test[i] 这个对象是不存在的，肯定报错，改成用THIS   this.readOnly = true; //不可编辑状态   
      this.className = "a";   
      }
    }   
    </script>    
    </body>   
    </html>