多创作本框,Jquery完成textarea依据文件内容自适应低度

在玩博客园的时候我们恐怕会小心到三个细节正是随便是乐乎新浪恐怕Tencent果壳网在转发和谈论的时候给您的私下认可文本框的可观都不会非常高,那大概是版面包车型地铁范围和用户一般只转播或然研讨二个短句有关。可是当您输入超越一行文字的时候,文本框的中度就机关撑高了,大大改进了体验,那样用户就能够看来任何的文字。不用再去拖动文本框的滚动条。

Jquery完结textarea依据文件内容自适应中度,jquerytextarea

在玩和讯的时候我们兴许会注意到三个细节就是无论是微博新浪可能腾讯新浪在转会和商量的时候给您的私下认可文本框的万丈都不会相当高,这可能是版面包车型客车范围和用户一般只转播可能讨论三个短句有关。但是当您输入超越一行文字的时候,文本框的惊人就自动撑高了,大大改革了体验,这样用户就足以看到整个的文字。不用再去拖动文本框的滚动条。

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有所扶助。

在玩微博的时候大家恐怕会专注到三个细节就是无论是搜狐新浪如故Tencent和讯在转载…

复制代码 代码如下:

autoTextarea.js

$(function(){
    var $comment = $(‘#comment’);  //获取商酌框 
    $(‘.bigger’).click(function(){ //放大开关绑定单击事件 
       if(!$comment.is(“:animated”)){ //决断是不是处于动画 
          if( $comment.height() < 500 ){ 
                $comment.animate({ height : “+=50” },400);
//复位中度,在原有的根底上加50 
          }
        }
    })
    $(‘.smaller’).click(function(){//减少按键绑定单击事件 
       if(!$comment.is(“:animated”)){//剖断是还是不是处在动画 
            if( $comment.height() > 50 ){
                $comment.animate({ height : “-=50” },400);
//重置中度,在本来的底蕴上减50 
            }
        }
    });
});

(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);

您大概感兴趣的小说:

  • jquery完毕公文框textarea自适应中度
  • jquery
    插件完毕多行文本框[textarea]机关高度
  • js/jquery获取文本框输入大旨的办法
  • 依据jQuery的持筹握算文本框字数的代码
  • 二个基于jquery的文件框记数器
  • JQuery 文本框使用小结
  • jquery对单选框,多选框,文本框等大面积操作小结
  • Jquery完成仿博客园博客园得到文本框能输入的篇幅代码
  • jQuery动态变更多行文本框中度的章程

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图