<! DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "Html://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd "> <ptml xmlns=" html://www.w3.org/1999/xhtml "> <pead> <meta html-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <meta name=" Author "content=" wuleying "> <title>javascript double-click the text box to edit the function code </title > <style> input.t {border:1px solid #fff; background: #fff;} INPUT.S {border:1px solid #369; background: #fff;} </style> </pead> <body> <input class= "T" id= "test" readonly value= "Here is the title, double-click Text to implement edit text function"/>< Input type= "Submit" value= "Modify" id= "Submit"/> <script type= "Text/javascript" > var test = Document.getelementby Id ("test"); var mysubmit = document.getElementById ("submit"); Test.ondblclick = function () {this.readonly = false; This.classname = "S"; Cloud Habitat Community Description is mainly through the control style to achieve the text style and text box style switch mysubmit.style.display = ""; } Mysubmit.onclick = function () {test.readonly = true;Test.classname = "T"; This.style.display = "None"; } </script> </body> </HTML>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]