Community Learn Tools Library Leisure

English

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

Common methods to make divs editable using javascript_javascript skills

WBOY

Release： 2016-05-16 19:08:13

Original

1041 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.

Related labels：

用javascript实现div可编辑的常见方法

source：php.cn

Previous article：Code for value transfer effect between javascript select_form effects Next article：I just discovered the solution to the hyperlink js that causes the GIF animation in the web page to stop_javascript skills

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