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 相关文章推荐
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 Javascript
Sea.JS知识总结
May 05 Javascript
js友好的时间返回函数
Aug 24 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
js实现双色球效果
Aug 02 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
php 文件缓存函数
2011/10/08 PHP
php目录拷贝实现方法
2015/07/10 PHP
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
Python中处理unchecked未捕获异常实例
2015/01/17 Python
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
flask应用部署到服务器的方法
2019/07/12 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
python3判断IP地址的方法
2021/03/04 Python
厨房工作人员岗位职责
2013/11/15 职场文书
影视动画专业个人的自我评价
2013/12/31 职场文书
优秀班干部事迹材料
2014/01/26 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
三下乡活动心得体会
2016/01/23 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python