jquery实现文本框textarea自适应高度


Posted in Javascript onMarch 09, 2016

浏览器中默认的文本框是不能根据内容的增多变高,只能固定高度有滚动条,体验不是很好,找了很多方法兼容都不行,总算找到个兼容良好的方法:

<body>
    <textarea id="textarea3" style="overflow-y:hidden; height:20px;resize: none">
     
    </textarea>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
      $(function() {
        //最小高度和最大高度默认
        $("#textarea1").textareaAutoHeight();
        //最大高度为100px
        $("#textarea2").textareaAutoHeight({maxHeight: 100});
        //最小高度为50px,最大高度为200px
        $("#textarea3").textareaAutoHeight({minHeight: 50, maxHeight: 200});
      })
 
 
      $.fn.extend({
        textareaAutoHeight: function(options) {
          this._options = {
            minHeight: 0,
            maxHeight: 1000
          }
 
          this.init = function() {
            for (var p in options) {
              this._options[p] = options[p];
            }
            if (this._options.minHeight == 0) {
              this._options.minHeight = parseFloat($(this).height());
            }
            for (var p in this._options) {
              if ($(this).attr(p) == null) {
                $(this).attr(p, this._options[p]);
              }
            }
            $(this).keyup(this.resetHeight).change(this.resetHeight)
                .focus(this.resetHeight);
          }
          this.resetHeight = function() {
            var _minHeight = parseFloat($(this).attr("minHeight"));
            var _maxHeight = parseFloat($(this).attr("maxHeight"));
 
            if (!$.browser.msie) {
              $(this).height(0);
            }
            var h = parseFloat(this.scrollHeight);
            h = h < _minHeight ? _minHeight :h > _maxHeight ? _maxHeight : h;
            $(this).height(h).scrollTop(h);
            if (h >= _maxHeight) {
              $(this).css("overflow-y", "scroll");
            }
            else {
              $(this).css("overflow-y", "hidden");
            }
          }
          this.init();
        }
      });
    </script>
  </body>

以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
关于递归运算的顺序测试代码
Nov 30 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
Bootstrap插件全集
Jul 18 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 Javascript
分享12个实用的jQuery代码片段
Mar 09 #Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 #Javascript
javascript html5移动端轻松实现文件上传
Mar 27 #Javascript
javascript事件绑定学习要点
Mar 09 #Javascript
js实现分割上传大文件
Mar 09 #Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 #Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 #Javascript
You might like
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
php格式化金额函数分享
2015/02/02 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
HTML node相关的一些资料整理
2010/01/01 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
Python对象体系深入分析
2014/10/28 Python
python制作图片缩略图
2019/04/30 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
python定义类的简单用法
2020/07/24 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
python 基于opencv操作摄像头
2020/12/24 Python
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
大四自我鉴定
2014/02/08 职场文书
《散步》教学反思
2014/03/02 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
校企合作协议书
2014/04/16 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
庆祝教师节主持词
2015/07/06 职场文书
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis