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游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
js关闭父窗口时关闭子窗口
Apr 01 Javascript
悬浮数字的实现案例
Feb 19 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
react-router 路由切换动画的实现示例
Dec 03 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 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
使用PHP和XSL stylesheets转换XML文档
2006/10/09 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
QML实现钟表效果
2020/06/02 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
校长岗位职责
2013/11/26 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
人力管理专业毕业生求职信
2014/02/27 职场文书
联欢晚会主持词
2014/03/25 职场文书
本科毕业生求职信
2014/06/15 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
格林童话读书笔记
2015/06/30 职场文书
Nginx反向代理、重定向
2022/04/13 Servers