Set multi-line text box [textarea] to automatically generate height

This time I will bring you settingsMulti-line text box[textarea] automatically generates height, set multi-line text box[textarea] to automatically generate heightWhat are the precautions, The following is a practical case, let’s take a look.

Implementation functions:

1/Automatically increase the height of a row when the textarea wraps a new line
2/Automatically reduce the height of a row when the textarea deletes a row Dependency: jquery.xxx.js Needed for work I use similar functions but find it inconvenient to import other files when using a plug-in, so I wrote a

textarea jquery plug-in

<p class="form-group">
    <label class="col-sm-3 control-label no-
padding-right
" for="form-field-5"> 内容</label>
    <p class="col-sm-9">
        <textarea class="col-sm-8" id="form-field-5" placeholder="请输入内容..."></textarea>
    </p>
</p>

jQuery.extend({
    textareaAutosize_dc: function() {
        $("textarea").on("keyup", function(e) {
            var 
current
EnterCount = $(this).val().split("\n").length;
            var lineHeight = Number($(this).css("
line-height
").replace("px", ""));
            var enterCount = $(this).attr("enterCount");
            if (currentEnterCount < enterCount && enterCount != undefined) {
                //每行减掉固定行高
                $(this).height($(this).height() - lineHeight);
            } else if (currentEnterCount > enterCount) {
                //每行加入固定行高
                $(this).height($(this).height() + lineHeight);
                $(this).attr("enterCount", currentEnterCount);
            }
            //记录当前行高
            $(this).attr("enterCount", currentEnterCount);
        });
    }
});
//调用自动高度
$.textareaAutosize_dc();

I believe you have mastered the method after reading the case in this article, please come for more exciting information Pay attention to other related articles on php Chinese website!

Recommended reading:

Jquery Mobile Custom Button Icon Steps Detailed Explanation

Jquery Mobile Custom Button Icon Steps Detailed Explanation

The above is the detailed content of Set multi-line text box [textarea] to automatically generate height. For more information, please follow other related articles on the PHP Chinese website!