Function: Realize instant editing of web page content, increasing the usability and interactivity of the page.
Method 1: Directly implement it through the textarea tag, please run the following code:
[Ctrl+A Select all Note:Introducing external Js requires refreshing the page before execution]
Method 1: Directly implement it through the textarea tag, please run the following code:
[Ctrl+A Select all Note:Introducing external Js requires refreshing the page before execution]
Idea: Design textarea through CSS style to make users feel less like textarea, and save user data ajax through properties such as onblur and oumouseout.
Method 2: Add input to the page through the method to achieve it. Please run the following code:
[Ctrl+A Select all Note:Introducing external Js requires refreshing the page before execution]
Ideas:
1. When the user's mouse passes through the editable area, use background color and other methods to remind the user that the area can be edited.
2. When the user clicks on this area with the mouse, that is, the onclick event, first clear the original content, and temporarily create an input box and an input button.
3. After the user has finished modifying, when clicking the "Save" button, write new data to the database through ajax.
PS: There are still some problems with the code of the second method. Let’s debug it if you have time.