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

赞 (0)

相关推荐

  • jquery文字填写自动高度的实现方法

    下面开始写一个jquery插件 (function($){ $.fn.autoTextarea = function(options) { var defaults={ maxHeight:null,//文本框是否自动撑高,默认:null,不自动撑高:如果自动撑高必须输入数值,该值作为文本框自动撑高的最大高度 minHeight:$(this).height() }; var opts = $.extend({},defaults,options); return $(this).each(fu

  • jquery实现textarea 高度自适应

    之前给大家分享过用Javascript控制文本框textarea高度随内容自适应增长收缩,今天花了点时间换了种实现方法,总结一下 复制代码 代码如下: jQuery.fn.extend({             autoHeight: function(){                 return this.each(function(){                     var $this = jQuery(this);                     if( !$th

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

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

  • 文本框根据输入内容自适应高度的代码

    其实现代浏览器大多都支持文本框尺寸调节功能,绝大多数情况下却没有自动适应来得爽快,在网络上发现一方法比较简单的实现文本框高度自适应,于是封装了这个函数,准备以后应用到项目中. 源代码: 23:03文章更新: 感谢alucelx同学再次给力的帮助,大大简化了方法,更新代码为0.2版本,同时解决了兼容Opera浏览器,至此全兼容IE6+与现代浏览器! 在线演示: http://demo.jb51.net/js/2011/autoArea/index.htmautoTextarea.js 复制代码 代

  • Textarea根据内容自适应高度

    直接看代码吧,很简单,也很实用. 复制代码 代码如下: <!DOCTYPE html><html><head><title>autoresizing textarea</title><style type="text/css">textarea {    border: 0 none white;    overflow: hidden;    padding: 0;    outline: none;    ba

  • jQuery获取文本内容和原生JS的异同之处

    jQuery获取文本内容和原生JS的异同之处

    目录 前言 一:html() 与 innerHTML 1.1 html() 对于内容的获取 1.2 html() 对于内容的设置 1.3 innerHTML 的设置与获取[原生JS 复习巩固] 1.3.1 innerHTML 对文本内容的获取 1.3.2 innerHTML 对文本内容的设置 二:text() 与 innerText 2.1 text() 对于内容的获取 2.2 text() 对于内容的设置 2.3 innerText 的设置与获取[原生JS 复习巩固] 2.3.1 innerT

  • iframe自适应高度的多种方法方法小结

    不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以"伸缩自如",所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下JS函数: 第一种方法:代码简单,兼容性还可以,大家可以先测试下. 复制代码 代码如下: function SetWinHeight(obj) { var win=obj; if (documen

  • Javascript 文本框textarea高度随内容自适应增长收缩

    直接上代码: 方案一: 枫芸志 » 文本框textarea高度自适应增长/伸缩 textarea { height:100px; width: 300px; } 晴枫制作 http://jb51.net // 最小高度 var minHeight = 100; // 最大高度,超过则出现滚动条 var maxHeight = 300; function ResizeTextarea(){ var t = document.getElementById('txtContent'); h = t.s

  • jQuery简单实现iframe的高度根据页面内容自适应的方法

    本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#iframeId").load(function () { var mainheight = $(this).contents().find("body").height() + 30; $(this).height(mainheight); }); 方式2: //注意:下面的代码

  • div实现自适应高度的textarea实现angular双向绑定

    相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就错了. textarea不是不可以的,然后我是这样错的.(就是监听scroll 如果出现了,就增加1rows 的高度)然而这样真的很挫 textarea.bind('change','keydown'){ if(scrollTop > 0 ) { textarea.rows += 1 } } 正确的

  • jquery动态增加text元素以及删除文本内容实例代码

    jquery动态增加text元素以及删除文本内容实例代码

    这段代码是通过jquery动态增加限定数额的text(本例为5个) ,以及清除文本内容,用到了after()方法追加元素. <!--以下为script代码开始--> 复制代码 代码如下: <script> $(document).ready(function(){ var spotMax = 5;//限定添加text元素的总个数 var afterId = 0;//要追加元素的id var newId=1;//新生成text的id if($('table#vote').size()

随机推荐