Use contentEditable in HTML5 to automatically increase the height of multi-line text_html5 tutorial tips

contentEditable is a global property developed by Microsoft, decompiled and put into use by other browsers. The main function of this attribute is to allow users to edit the content in the element, so the element must be an element that can obtain mouse focus, and a caret must be provided to the user after clicking the mouse to prompt the user that the content in the element is allowed to be edited. The contentEditable property is a Boolean property that can be specified as true or false.

In addition, this attribute also has a hidden inheritance state. When the attribute is true, the element is designated as allowing editing; when the attribute is false, the element is designated as not allowing editing; when true or not is specified When false, it is determined by the inherit state. If the parent element of the element is editable, the element is editable.

In addition, in addition to the contentEditable attribute, the element also has an isContentEditable attribute. When the element is editable, this attribute is true; when the element is not editable, this attribute is false.
The following is an example of using the contentEditable attribute. When the contentEditable attribute is added to a list element, the element becomes editable. Readers can experiment with this example in the browser.

XML/HTML CodeCopy content to clipboard

1. /span>> 
2. head> 
3. meta charset="UTF- 8"> 
4. title>conentEditalbe attribute example title> 
5. head> 
6. h2>Editable list h2> 
7. ul contentEditable="true" > 
8. li>List element 1 li> 
9. li>List element 2 li> 
10. li>List element 3 li> 
11. ul> 

The result after running this code is as shown below:

Line text automatically increases in height

When it comes to multi-line text boxes, everyone will immediately think of using textarea. Using textarea is really convenient, but there is one disadvantage. It cannot automatically increase the height. You can only specify the number of words in the corresponding columns and rows or directly use CSS to increase the height. Width.

Automatic heightening is still needed at certain times, such as the input box similar to posting on Weibo, which is a typical requirement: the text box has a default height, and when the input text exceeds this height, it will automatically increase. There must be a maximum limit. After exceeding this limit, a vertical scroll bar will appear.

If you use textarea to complete this requirement, you also need to cooperate with js to monitor changes in text height to dynamically change the height of the text box. This is very inconvenient, especially on the mobile side, which is unscientific. At this time, You can use the attribute contenteditable.

For example:

XML/HTML CodeCopy content to clipboard

1. div contenteditable="true" class="box" id="box" >
2.                                                        
3. div>
4. style>
.box{width:200px;max-height:100px;border:1px solid #ccc;overflow-y:auto;overflow-x:hidden;}
6. style>

As long as the value of the contenteditable attribute is specified to be true, the div will become editable and will automatically increase in height as the content increases. Then we give the div a maximum height to achieve the above requirements.