Use div to simulate textarea to achieve highly adaptive text input box (attached: js control textarea to achieve highly adaptive text input box), divtextarea

Use div to simulate textarea to achieve highly adaptive text input box (attached: js control textarea to achieve highly adaptive text input box), divtextarea

I. There are many restrictions on using the textarea label to input multi-line text. For example, the high self-adaptability cannot be achieved, and the ugly scroll bar may occur.

A new contenteditable attribute is added to html5. this attribute allows uneditable tags other than input and textarea to be editable;

The usage is as follows:

// Contenteditable = "true" when the attribute value is true, you can write tags into the Editable tags. the styles of copied styles are retained;
<Div contenteditable = "true"> I am an editable Rich Text Box </div>

// Contenteditable = "plaintext-only" when the property value is plaintext-only, only plain text data can be written to the Editable tag. For copied styles, convert to plain text, and filter out style labels and other content;
<Div contenteditable = "plaintext-only"> </div>

 

2. If you do not use this attribute, you can use js to control the height of textarea. The principle is to increase the height of textarea when a scroll bar appears, so that the scroll bar disappears.

How to determine whether a scroll bar exists? When the scrollHeight of an element is greater than offsetHeight, the scroll bar appears;

The implementation method is as follows:

// Html
<Textarea id = "text"> </textarea>

// Css
# Text {
Font-size: 20px;
Overflow: hidden; // required
}

// Js
$ ('# Text'). on ('input', function (){
If (text. scrollHeight> text. offsetHeight ){
THeight + = 20; // The font-size is 20, so the height of textarea is increased by 20 PX each time.
Watermark ('{text'}.css ('height', THeight );
}
})