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


Posted in Javascript onNovember 07, 2016

下面开始写一个jquery插件

(function($){
  $.fn.autoTextarea = function(options) {
    var defaults={
      maxHeight:null,//文本框是否自动撑高,默认: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);

调用代码示例:

<textarea name="textarea" id="textarea" cols="60" rows="4" class="chackTextarea-area"></textarea>
<script type="text/javascript">

  $(".chackTextarea-area").autoTextarea({
    maxHeight: 220,//文本框是否自动撑高,默认:null,不自动撑高;如果自动撑高必须输入数值,该值作为文本框自动撑高的最大高度
  });

以上这篇jquery文字填写自动高度的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript比较文档位置
Apr 08 Javascript
理解Javascript_06_理解对象的创建过程
Oct 15 Javascript
jQuery实现鼠标经过图片预览大图效果
Apr 10 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 #Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 #Javascript
vue.js初学入门教程(2)
Nov 07 #Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 #Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 #Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 #Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 #Javascript
You might like
NOT NULL 和NULL
2007/01/15 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
Python numpy 常用函数总结
2017/12/07 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
行政专员工作职责
2013/12/22 职场文书
幼儿园教师考核制度
2014/02/01 职场文书
护士进修自我鉴定
2014/02/07 职场文书
物流专员岗位职责
2014/02/17 职场文书
酒店节能降耗方案
2014/05/08 职场文书
十八大演讲稿
2014/05/22 职场文书
保安公司服务承诺书
2014/05/28 职场文书
文艺晚会策划方案
2014/06/11 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技