Div simulates textarea to achieve high self-growth, divtextarea

Div simulates textarea to achieve high self-growth, divtextarea

Today, a front-end friend suddenly asked me how the height of textarea increases with the content. I suddenly lost my mind. The first thing I thought was to use js to change the height of textarea, however, Baidu's reference code is not very effective.

Because the textarea used in the previous project is always stuck to the height and beyond the implementation of the scroll bar, if it is not too concerned about the user experience, there is no need to do anything high self-growth ......

However, excellent designs are invisible to the sand, and nothing is impossible. Next we will introduce how to simulate a textarea through div to achieve high self-growth (of course, js can also be used to achieve it, but I do not feel necessary ).

OK. Now I want to learn how to use it. First, I need to knock out a div:

<div id="textarea" contenteditable="true"></div>

You must have discovered a rare attribute contenteditable. what? What is this? A friend who understands English may understand it at a Glance. It should be the meaning of Editable content. That's right, by setting this attribute to true, You can edit the content in the div like textarea!

However, I believe that 90% of our friends will ask: This attribute should be HTML5, and IE is incompatible...

Sorry, these friends are disappointed. You are only half right. contenteditable is indeed the attribute of HTML5, but IE is a step ahead this time, earlier in the past, IE supported this attribute. At least IE6 was okay, so you can rest assured about compatibility.

I believe my friends are dumbfounded, so practical! This is easy! It must have been added to favorites first!

Slow down. We haven't finished it yet. Since div has replaced textarea, do we have to imitate it next? At least, it must be imitated.

You can set the height by setting min-height and max-height. You can set padding, outline, font-size, and overflow to beautify the details. The Code is as follows:

1 #textarea {2      width:300px;3      border:1px solid #ccc;4      min-height:150px;5      max-height:300px;6      overflow: auto;7      font-size: 14px;8      outline: none; 9 }

The complete demonstration is as follows:

OK, our goal has been achieved and it is perfect. With this method, we can also implement many functions that cannot be implemented by textarea, for example, you can set the color and font size of a local font in textarea. We can say that we have implemented a textarea that can recognize html code. The effect is as follows:

Okay, you're done!

 

Thank you for reading, this article inspiration from: http://www.zhangxinxu.com reprint please indicate the source, welcome to comment.

Original article. For more information, see [http://www.cnblogs.com/luozhihao]
Address: http://www.cnblogs.com/luozhihao/p/4745365.html