jquery 插件实现多行文本框[textarea]自动高度

前端技术 2023/09/05 JavaScript

实现功能:

1/当textarea换行时自动增加一行高度
2/当textarea删除一行时 自动减少一行的高度 依赖:jquery.xxx.js 工作中需要使用类似功能但是觉得使用插件需要导入其他文件很不方便所以就写了一个

textarea jquery插件

复制代码 代码如下:

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

复制代码 代码如下:

jQuery.extend({
    textareaAutosize_dc: function() {
        $(\"textarea\").on(\"keyup\", function(e) {
            var currentEnterCount = $(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();

以上就是本文的全部内容了,希望大家能够喜欢。

本文地址:https://www.stayed.cn/item/14693

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。