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

This article mainly introduces how to use div simulation to achieve textarea related knowledge, detailed and easy to understand, simple and fast operation, with certain reference value, I believe that everyone will have a harvest after reading this article on how to use div simulation to achieve textarea, let's take a look at it.

We all know that textarea is a very common element in form forms. It is used for multi-line text input. You can set the number of rows and columns.

But the default textarea style looks ugly on the page, and many pages are implemented using div to simulate textarea. For example, Qzone home page published say, after you look at the page source code will find that this input box is actually a div element, not a textarea element, now let's see how this is achieved?

First let's see what the effect is.

achieve effects

Key attribute: contenteditable

Just as this property literally means editable, if you set contentedible =true on the page tag, the tag can be edited.

It can be combined with the user-modify attribute, which controls whether users can edit page elements. You can choose rich text or plain text content by setting different values, but since this attribute is a non-standard attribute, few people know it.

First let's look at the HTML part of the page code, which is a very simple div tag, and then set the contenteditable attribute to true.

HTML section code

Let's look at the complete implementation of CSS code.

CSS style

Min-height and max-height attributes allow you to control the height of the div, and scroll bars appear when the content exceeds max-height. If you want to fix the div's height, you can simply set the height property instead of min-height and max-height.

About "how to use div simulation to achieve textarea" The content of this article is introduced here, thank you for reading! I believe everyone has a certain understanding of "how to use div simulation to realize textarea" knowledge. If you still 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.