当前位置: 首页 > 编程笔记 >

Jquery实现textarea根据文本内容自适应高度

巫马修然
2023-03-14
本文向大家介绍Jquery实现textarea根据文本内容自适应高度,包括了Jquery实现textarea根据文本内容自适应高度的使用技巧和注意事项,需要的朋友参考一下

在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能是版面的限制和用户通常只转播或者评论一个短句有关。但是当你输入超过一行文字的时候,文本框的高度就自动撑高了,大大改善了体验,这样用户就可以看到全部的文字。不用再去拖动文本框的滚动条。

autoTextarea.js

(function($){
  $.fn.autoTextarea = function(options) {
    var defaults={
      maxHeight:null,
      minHeight:$(this).height()
    };
    var opts = $.extend({},defaults,options);
    return $(this).each(function() {
      $(this).bind("paste cut keydown keyup focus blur",function(){
        var height,style=this.style;
        this.style.height = opts.minHeight + 'px';
        if (this.scrollHeight > opts.minHeight) {
          if (opts.maxHeight && this.scrollHeight > opts.maxHeight) {
            height = opts.maxHeight;
            style.overflowY = 'scroll';
          } else {
            height = this.scrollHeight;
            style.overflowY = 'hidden';
          }
          style.height = height + 'px';
        }
      });
    });
  };
})(jQuery);

demo.js

$(".doctable textarea").autoTextarea({
  maxHeight:400,
  minHeight:100
});

以上所述就是本文的全部内容了,希望能够给大家学习jQuery有所帮助。

 类似资料:
  • 本文向大家介绍jquery实现textarea 高度自适应,包括了jquery实现textarea 高度自适应的使用技巧和注意事项,需要的朋友参考一下 之前给大家分享过用Javascript控制文本框textarea高度随内容自适应增长收缩,今天花了点时间换了种实现方法,总结一下 以上就是本文所述的全部内容了,希望对大家学习jQuery能够有所帮助。

  • 本文向大家介绍jQuery简单实现iframe的高度根据页面内容自适应的方法,包括了jQuery简单实现iframe的高度根据页面内容自适应的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法。分享给大家供大家参考,具体如下: 方式1: 方式2: 更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery操作ifr

  • 本文向大家介绍jquery 插件实现多行文本框[textarea]自动高度,包括了jquery 插件实现多行文本框[textarea]自动高度的使用技巧和注意事项,需要的朋友参考一下 实现功能: 1/当textarea换行时自动增加一行高度 2/当textarea删除一行时 自动减少一行的高度 依赖:jquery.xxx.js 工作中需要使用类似功能但是觉得使用插件需要导入其他文件很不方便所以就写

  • 本文向大家介绍教你用jquery实现iframe自适应高度,包括了教你用jquery实现iframe自适应高度的使用技巧和注意事项,需要的朋友参考一下 iframe代码,注意要写ID jquery代码一: jquery代码二:

  • 本文向大家介绍如何让textarea高度自适应呢?相关面试题,主要包含被问及如何让textarea高度自适应呢?时的应答技巧和注意事项,需要的朋友参考一下 使用 div contenteditable 模拟的代价实在太大了。 推荐看看 ant-design 和 elementUI 的源码设计即可。 https://github.com/ElemeFE/element/blob/dev/packag

  • 本文向大家介绍jQuery实现textarea自动增长宽高的方法,包括了jQuery实现textarea自动增长宽高的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现textarea自动增长宽高的方法。分享给大家供大家参考,具体如下: 希望本文所述对大家jQuery程序设计有所帮助。

  • 本文向大家介绍EasyUI 数据表格datagrid列自适应内容宽度的实现,包括了EasyUI 数据表格datagrid列自适应内容宽度的实现的使用技巧和注意事项,需要的朋友参考一下 项目初期在加载数据表格的时候为了提高表格数据渲染速度,设置了默认宽度。 现需求需要加一个表格自适应的功能,触发改功能,改变列宽度,但是不重新渲染表格,不发生数据请求。 设计思路,遍历每项的所有数据,比较字节符串长度,

  • 本文向大家介绍javascript原生和jquery库实现iframe自适应高度和宽度,包括了javascript原生和jquery库实现iframe自适应高度和宽度的使用技巧和注意事项,需要的朋友参考一下 javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码! 基于Jquery库的代码很好实现: ‍基于JS原生代码的实现: 只需在你被ifr