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

Today, I will talk to you about div simulation textarea text field how to achieve a high degree of adaptation, many people may not understand, in order to let you know more, Xiaobian summarized the following content for you, I hope you can harvest according to this article.

P's contentedible property allows users to edit any text contained in the element's content, including child elements. This is the key to simulating text fields. After applying this property, ordinary p tags can also get focus like text fields, and there is a cursor flashing there. The more you look at her, the more she flashes. The input box of the chat dialog box of web QQ 2.0 is applied to this attribute. It is very simple to use. A common block element with a contenterable ="true" is ok, as follows:

It doesn't matter if the quotation marks outside true are even removed. The contenteditable attribute is HTML5 content, but IE seems to have supported this tag attribute for a long time. So compatibility is not something to worry about.

OK, the most troublesome editable effects of analog textarea have been solved, and now it is as easy to use p to achieve high adaptability as loosening soil for flowers and plants. Using the min-height attribute is basically a step in place. Considering that the IE6 browser disregards the min/max family, combined with the internal element overflow, the parent label height and width characteristics, the IE6 browser can be directly set. So, assuming we want to achieve the default height of 200 pixels, the height can be adapted to the effect of the content, directly the following two styles can be:

{ min-height: 200px; _height: 200px; }

Thus, by putting together what we have said, we can easily achieve a high degree of adaptation using p analog textarea text fields. ** The following test code-- CSS code: **

.test_box { width: 400px; min-height: 120px; max-height: 300px; _height: 120px; margin-left: auto; margin-right: auto; padding: 3px; outline: 0; border: 1px solid #a0b3d6; font-size: 12px; word-wrap: break-word; overflow-x: hidden; overflow-y: auto; _overflow-y: visible;}

HTML Code:

The results are as follows (all taken from IE6 browser):

Some notes and notes

1. Modern browsers such as Firefox have a virtual box when p gets focus in editable mode, but in fact textarea is not displayed with a virtual box, this sign will expose p as a fake, so you need to add the following style:

outline:0;

2.editable p in Firefox If the inner element is empty, then the cursor is invisible or flush with the outer p when it gets focus, which will also expose itself as a textarea fake, so by default, we can add a lone newline tag to this p. However, under IE8, if there is a default br label, the cursor position may flash in the second line, so, under IE8, the editable p cannot have br label by default. Well, you can find a way to clear it yourself.

3. Under IE browser (IE6~8), when entering text, p will automatically generate p tags containing each line of elements, while other browsers seem to generate br tags (not all tested here, if not, welcome to correct). Since the default p-tag has upper and lower margin values of 1em, we can set the margin value of the style clearing p-tag such as the following for uniform effect:

.test_box p{ margin: 0; }

4, editable mode p input content will be very authentic HTML code, if submitted as content, then HTML character filtering is required. Also, if you copy a paragraph from another page and paste it into p in editable mode, even HTML will be copied completely (unlike textarea), so HTML character filtering is also necessary here (e.g. web QQ).

5, IE6 browser does not support max-height attribute, so only CSS is unable to achieve more than a certain height scroll bar effect, need js to cooperate with the implementation.

The editable mode p tag is the same as textarea, which supports focus, blur events. Nature also supports focus pseudo-class, demo page Firefox and other modern browsers get focus when the outer light is used:focus.

Having read all of this, do you have any idea how div analog textarea text fields are highly adaptive? If you still want to know more knowledge or related content, please pay attention to the industry information channel, thank you for your support.

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.