Home > Web Front-end > JS Tutorial > Summary of common methods to make div editable_javascript skills

Summary of common methods to make div editable_javascript skills

WBOY
Release: 2016-05-16 19:14:14
Original
1396 people have browsed it

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:


[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute
]

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:

[Ctrl A Select all Note:
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.
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template