本文介绍了一种通过JavaScript实现的双击文本框后使其变为可编辑状态的方法。具体包括两种情况：一是对同名文本框进行操作；二是对非同名文本框进行循环操作。通过简单的代码示例展示了如何切换文本框的只读状态及样式。
可直接对同名的文本框操作如：
<input class="a" name="test" readonly value="点我一下可以编辑我" type="text" /> <input class="a" name="test" readonly value="点我一下可以编辑我" type="text" /> <mce: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(); // --></mce:script>
对非同名文本框的循环：
<title>双击文字出现编辑文本框的JS代码</title> <mce:style><!-- input.a {border:0px;} input.b {border:1px solid #369;background:#fff;} --></mce:style><style mce_bogus="1"> 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" /> <mce: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"; } } // --></mce:script> </body> </html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
