search

Home  >  Article  >  Web Front-end  >  Common methods to make divs editable using javascript_javascript skills

Common methods to make divs editable using javascript_javascript skills

WBOY
WBOYOriginal
2016-05-16 19:08:131007browse

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.
Statement：
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
Previous article：Code for value transfer effect between javascript select_form effectsNext article：Code for value transfer effect between javascript select_form effects

Related articles

See more