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

Today, I would like to share with you how to use contentEditable in HTML5 to automatically increase the relevant knowledge points of multi-line text, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can get something after reading this article, let's take a look at it.

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

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.

These are all the contents of the article "how to use contentEditable in HTML5 to automatically increase multiple lines of text". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.