Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "how to use contentEditable in HTML5 to automatically increase multi-line text". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

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

In addition, the attribute has a hidden inherit (inheritance) state. When the attribute is true, the element is specified to allow editing; when the attribute is false, the element is specified not to allow editing; when true or false is not specified, it is determined by the inherit state, and if the element's parent element is editable, the element is editable.

In addition, in addition to the contentEditable attribute, the element has an isContentEditable attribute, which is true; when the element is editable and false when the element is not editable.

The following is an example of using the contentEditable attribute. When a list element is added with a contentEditable attribute, the element becomes editable, and the reader can experiment with the example in the browser.

XML/HTML Code copies content to the clipboard

Example of conentEditalbe property

Editable list

List element 1

List element 2

List element 3

The result of running this code is as follows:

Automatic text heightening

When it comes to multi-line text boxes, you will immediately think of using textarea, it is really convenient to use textarea, but it is not very good, can not automatically increase, can only specify the corresponding number of columns and rows of words or directly css to the width.

Automatic heightening is still needed at certain times, such as an input box similar to sending Weibo, which is a typical need: the text box has a default height, and when the input text exceeds this height, it automatically increases. There is also a maximum limit beyond which a vertical scroll bar will appear.

If you use textarea to accomplish this requirement, you also need to cooperate with js to listen for changes in the height of the text to dynamically change the height of the text box, which is very inconvenient, especially when it is unscientific on the mobile end, and the attribute contenteditable can be used at this time.

Such as:

XML/HTML Code copies content to the clipboard

.box {width:200px;max-height:100px;border:1px solid # ccc;overflow-y:auto;overflow-x:hidden;}

As long as you specify the value of the contenteditable attribute as true,div, it becomes editable and automatically increases as the content increases, and then we give div a maximum height to achieve the requirements mentioned above.

This is the content of "how to use contentEditable in HTML5 to automatically increase multi-line text". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.