Set the contenteditable attribute to edit the content of HTML tags (can replace textarea)

Copy code

The code is as follows:

<div contenteditable="true">You can edit the content</div>

If you add contenteditable="true" to BODY, you can find out how magical this attribute is. Therefore, we can set the contenteditable="true" attribute to the HTML tag to edit the tag.

The contenteditable attribute is compatible with all browsers (the compatibility of versions prior to IE6 has not been tested).

Sometimes we can use DIV instead of input or textarea to achieve the same effect. For example, when using ajax, we can get the content of DIV when submitting the form.

Careful people will find that the text box for posting comments in QQ space is actually a DIV, not a textarea text box.

How does Div+CSS simulate the textarea text field height adaptation to achieve the contenteditable attribute of the HTML5 standard

This effect is mainly achieved by adding the contenteditable attribute in HTML5 to the tag (contenteditable: specifies whether the user is allowed to edit the content). The great thing is that IE will also support this attribute, so you don’t have to worry too much about compatibility issues.
DEMO:

Copy code

The code is as follows:

Attachment:
In FF browser, when the container gets the focus, the cursor height will be the same as the container height or the cursor will not be displayed. At this time, if you add a placeholder to the container by default, such as <br/> or  , this problem can be solved.

Now Yuzi will introduce to you another good method that can be edited and automatically adapt to the height without adding js code. Let everyone open their eyes. Yuzi can directly use DIV as a text box, which is similar to the TextArea text box. More importantly, the user experience of DIV is more perfect and cooler.

The contentEditable attribute in Html can turn on the editable state of certain elements. Maybe you have never used the contentEditable attribute, or even never heard of it, but the role of contentEditable is quite magical. You can make div or the entire web page, as well as span and other elements writable. The most commonly used text input elements are input and textarea. After using the contentEditable attribute, you can enter content in div, table, p, span, body, and many other elements. In particular, contentEditable has been effectively supported in the HTML5 standard. Come and witness it.

After setting the contentEditable="true" attribute, isn’t it quite magical? Ha ha…

DEMO page: http://demo.jb51.net/js/2014/ContentEditable/

Let's have a special effect. By opening the div element editing, can we insert a picture? This requires the use of js.

Copy code

The code is as follows:

Awesome! If you want to use more effects, you need to write js code yourself. I hope all the siege heroes can give their best and look forward to sharing!

<<: jQuery+swiper component realizes the timeline sliding year tab switching effect

>>: Study on using characters instead of pictures to achieve rounded or sharp corners