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 document.execCommand() 常用解析
Dec 14 Javascript
xml转json的js代码
Aug 28 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
Jquery 在页面加载后执行的几种方式
Mar 14 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 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代码DOS造成用光网络带宽
2011/03/01 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
python实现倒计时的示例
2014/02/14 Python
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
Python实现线程状态监测简单示例
2018/03/28 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
师范生自荐信范文
2013/10/06 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
校本研修个人总结
2015/02/28 职场文书
党小组评议意见
2015/06/02 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL
pandas中DataFrame重置索引的几种方法
2021/05/24 Python