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


Posted in Javascript onApril 03, 2015

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

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

Javascript 相关文章推荐
Javascript与vbscript数据共享
Jan 09 Javascript
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
Angular2自定义分页组件
Apr 19 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
vue+iview动态渲染表格详解
Mar 19 Javascript
微信小程序实现点击导航条切换页面
Nov 19 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 #Javascript
kindeditor修复会替换script内容的问题
Apr 03 #Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 #Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 #Javascript
Javascript代码实现仿实例化类
Apr 03 #Javascript
使用Jquery实现每日签到功能
Apr 03 #Javascript
JavaScript获取按钮所在form表单id的方法
Apr 02 #Javascript
You might like
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
php去除字符串换行符示例分享
2014/02/13 PHP
php递归json类实例
2014/12/02 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
静态的动态续篇之来点XML
2006/12/23 Javascript
jquery tools之tooltip
2009/07/25 Javascript
Javascript this指针
2009/07/30 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
利用Python实现图书超期提醒
2016/08/02 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
Python中作用域的深入讲解
2018/12/10 Python
python实现字符串加密成纯数字
2019/03/19 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
Python os模块常用方法和属性总结
2020/02/20 Python
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
幼儿教师师德承诺书
2014/05/23 职场文书