热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了jquery插件实现多行文本框[textarea]自动高度,需要的朋友可以参考下

实现功能:

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

textarea jquery插件

代码如下:


   
   

       
   


代码如下:

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                 //每行减掉固定行高
                $(this).height($(this).height() - lineHeight);
            } else if (currentEnterCount > enterCount) {
                //每行加入固定行高
                $(this).height($(this).height() + lineHeight);
                $(this).attr("enterCount", currentEnterCount);
            }
            //记录当前行高
            $(this).attr("enterCount", currentEnterCount);
        });
    }
});
//调用自动高度
$.textareaAutosize_dc();

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


推荐阅读
author-avatar
Candy王丫丫
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有