The textarea automatically increases or decreases as the text increases

Today I need a page for replying to comments. The initial interface given by the designer is a box with only one line. Then I thought about how to implement this interaction better, and then I remembered the practice of Sina Weibo: click on the comment, and one line will be displayed by default. When the input text exceeds one line or enter Enter, the height of the input box will change until the input complete. Immediately I felt that this detail was done quite well and could be imitated. Here are two ways to achieve highly adaptive textarea. One is to use div to simulate textarea, and use CSS to control the style without JS; the other is to use JS to control (because there is a browser compatibility problem, so write It is more troublesome); it should be encapsulated by jquery, go back and study

Google, IE, and Opera display two lines of text by default. Firefox displays three lines of text by default. If the number of lines exceeds two, a scroll bar will appear. You can set some number of lines by yourself to force how many lines to display.

Method 1: The div simulates the textarea text field to easily achieve high adaptability (the disadvantage is that there is no placeholder prompt)

Because textarea does not support adaptive height, that is, after setting the height or the number of lines, the scroll bar will be displayed in the excess part, which does not look beautiful.
When using DIV to simulate, the first problem encountered is: how to realize the input function of div?
For example, adding contenteditable="true" to an ordinary block element will implement editing, and the cursor will appear.

Although the contenteditable attribute is the content in HTML5, IE seems to have supported this tag attribute for a long time. So, don't worry too much about compatibility.

<style type="text/css">
    #textarea {
            width: 400px;
            min-height: 20px;
            max-height: 300px;
            _height: 120px;
            margin-left: auto;
            margin-right: auto;
            padding: 3px;
            outline: 0;
            border: 1px solid #a0b3d6;
            font-size: 12px;
            line-height: 24px;
            padding: 2px;
            word-wrap: break-word;
            overflow-x: hidden;
            overflow-y: auto;
            border-color: rgba(82, 168, 236, 0.8);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
        }
</style>
<div class="textarea" contenteditable="true"><br /></div>

In the CSS code, because IE6 does not support min/max, a hack is made

Method 2: The text box textarea adapts the height according to the input content

This writing method is written in native JS, considering a lot of compatibility issues, and it has the same function as the reply effect of Sina Weibo.

<!DOCTYPE html>
<html>
<head>
<title>autoresizing textarea</title>
<style type="text/css">
textarea {
    border: 0 none white;
    overflow: hidden;
    padding: 0;
    outline: none;
    background-color: #D0D0D0;
    resize: none;
}
</style>
<script type="text/javascript">
var observe;
if (window.attachEvent) {
    observe = function (element, event, handler) {
        element.attachEvent('on'+event, handler);
    };
}
else {
    observe = function (element, event, handler) {
        element.addEventListener(event, handler, false);
    };
}
function init () {
    var text = document.getElementById('text');
    function resize () {
        text.style.height = 'auto';
        text.style.height = text.scrollHeight+'px';
    }
    /* 0-timeout to get the already changed text */
    function delayedResize () {
        window.setTimeout(resize, 0);
    }
    observe(text, 'change',  resize);
    observe(text, 'cut',     delayedResize);
    observe(text, 'paste',   delayedResize);
    observe(text, 'drop',    delayedResize);
    observe(text, 'keydown', delayedResize);
 
    text.focus();
    text.select();
    resize();
}
</script>
</head>
<body onload="init();">
<textarea cols="40" rows="1" style="height:25px;" id="text"></textarea>
</body>
</html>

Using the above code, the textarea can be highly adaptive during initialization and the textarea can also be highly adaptive when it is modified.

Today I found a method for Jquery to control the height and record it

jQuery.fn.extend({

autoHeight: function(){

return this.each(function(){

var $this = jQuery(this);

if( !$this.attr('_initAdjustHeight') ){

$this.attr('_initAdjustHeight', $this.outerHeight());

}

_adjustH(this).on('input', function(){

_adjustH(this);

});

/**

* 重置高度

* @param {Object} elem

function _adjustH(elem){

var $obj = jQuery(elem);

return $obj.css({height: $obj.attr('_initAdjustHeight'), 'overflow-y': 'hidden'})

.height( elem.scrollHeight );

}

});

// 使用

$(function(){

$('textarea').autoHeight();

});

</script>

．

The textarea automatically increases or decreases as the text increases

Guess you like