Function: To achieve the content of the Web page real-time editing, increase the usability of the page, interactive.
Method 1: Directly through the TEXTAREA tag implementation, run the following code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <HTML> <HEAD> <TITLE> New Document </TITLE> <meta name= "generator" content= "EditPlus" > <meta name= "Author" content= "" > <meta N Ame= "Keywords" content= "" > <meta name= "Description" content= "" > <style type= "text/css" > #info { font-size:12px; Overflow:hidden; Background-color: #ffffcc; Color:black; padding-right:5px; padding-left:5px; Font-family:courier; width:100%; letter-spacing:0; line-height:12px; Border-style:none; } </style> </HEAD> <BODY> <div id= "SDF" > <textarea id= "info" onblur= SA Veinfo () "onmouseout=" Saveinfo () "onkeyup=" Setrows () "></textarea> </div> <script Langu Age= "JavaScript" > Function Saveinfo () { var text = document.getElementById ("info"). Value; Then use AJAX to update the current modifications to the database} function Setcols () {var textarea = document.getElementById ("info"); Textarea.setattribute ("Cols", Math.floor (TEXTAREA.CLIENTWIDTH/7)); Setrows (); function Setrows () {var textarea = document.getElementById ("info"); var cols = Textarea.cols; var str = textarea.value; str = str.replace (/\r\n?/, "\ n"); var lines = 2; var chars = 0; for (i = 0; i < str.length i++) {var c = Str.charat (i); chars++; if (c = = "\ n" | | chars = = cols) {lines + +; chars = 0; } textarea.setattribute ("Rows", lines); Textarea.style.height = lines*12 + "px"; function SetDefault () {var Textarea=document.getelementbyid ("info"); Textarea.value= "Click here to edit"; } setdefault (); Setcols (); </script> </BODY> </HTML>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Idea: Will textarea through the CSS style design to let the user feel not like is the textarea appearance, through onblur, oumouseout and so on the attribute carries on Ajax to save the user data.
method Two: Through the Document.createelement method adds input to the page to realize. Please run the bottom code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <HTML> <HEAD> <TITLE> New Document &L t;/title> <meta name= "generator" content= "EditPlus" > <meta name= "Author" content= "" > <meta NAME= "Key Words "content=" "> <meta name=" Description "content=" "> </HEAD> <BODY> <div id=" Gtest "> Click here to edit </div> <script language= "JavaScript" > <!--var obj=document.getelementbyid ("Gtest"); var temp_info=obj.innerhtml; Obj.onclick=function () {obj.innerhtml= ""; obj.style.background= "White"; var temp_text = document.createelement ("input"); temp_text.id= "Test"; Temp_text.value=temp_info.replace (/\r\n?/, "\ n"); Obj.appendchild (Temp_text); var temp_btn = document.createelement ("input"); Temp_btn.type= "button"; Temp_btn.value= "Save"; Temp_btn.onclick=function () {Obj.innerhtml=document.getelementbyid ("test"). Value; } OBJ.APPENDCHILD (TEMP_BTN); } obj.onmouseover=function () {obj.style.background= "#ff6600"; } obj.onmouseout=function () {obj.style.background= "white"; }//--> </SCRIPT> </BODY> </HTML>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Ideas:
1, when the user mouse over the editable region, with the background color and so on to remind users of the area can be edited.
2, when the user clicks on the area, that is, the onclick event, the original contents of the first clear out, will temporarily create an input box and an input button.
3, after the user changes, click the "Save" button to write new data to the database through Ajax.
PS: The second method of the code still has a problem, have time to debug again.
