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 相关文章推荐
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
原生js事件的添加和删除的封装
Jul 01 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
Bootstrap风格的zTree右键菜单
Feb 17 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
js+css实现打字效果
Jun 24 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 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生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
数控技术专业毕业自荐书范文
2014/02/05 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
初中生毕业评语
2014/12/29 职场文书
新郎接新娘保证书
2015/05/08 职场文书
对学校的意见和建议
2015/06/04 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
python中%格式表达式实例用法
2021/06/18 Python
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL