Function: Real-time editing of web content, increasing the usability and interactivity of the page.
Method 1: Directly through the textarea tag, please run the following code:
]
Idea: Pass textarea through CSS The style is designed so that the user does not feel like a textarea, and user data is saved through ajax through onblur, oumouseout and other attributes.
Method 2: Add input to the page through the document.createElement method. Please run the following code: If you need to introduce external Js, you need to refresh to execute
]
Idea:
1 . When the user's mouse passes over the editable area, the background color and other methods are used to remind the user that the area is editable.
2. When the user clicks the area with the mouse, that is, during the onclick event, the original content will be cleared first, and an input box and an input button will be temporarily created. 3. After the user completes the modification, click the "Save" button to write new data to the database through ajax. PS: There are still some problems with the code of the second method. Please debug it when you have time.