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

<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文本框textarea自适应高度的更多相关文章

  1. div模拟textarea自适应高度

    之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...

  2. jQuery文本框中的事件应用

    jQuery文本框中的事件应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  3. jQuery实现iframe的自适应高度

    假设我们在当前页面要嵌套一个iframe 1 <iframe id="myframe" src="test.html" height="240& ...

  4. 禁止多行文本框textarea拖拽

    禁止多行文本框textarea拖拽: textarea { resize: none; } resize这个是用于元素缩放,它可以取以下几个值: none 默认值 both 允许水平方向及垂直方向缩放 ...

  5. Jquery文本框值改变事件兼容性

    Jquery文本框值改变事件(支持火狐.ie)   Jquery值改变事件支持火狐和ie浏览器,并且测试通过,绑定后台代码可以做成autocomplete控件. 具体代码列举如下: ? $(docum ...

  6. textarea自适应高度，div模仿textarea可编辑实现自适应高度，placeholder使用图标

    1.textarea自适应高度,placeholder使用图标 自适应高度,有很多种办法: 1)jq: $("textarea").on("input",fun ...

  7. div模拟文本框textarea

    需求:利用highlight.js对文本框中的内容进行高亮显示 1.highlight.js使用 js中:<script src="js/highlight/highlight.pac ...

  8. CodeMirror编辑器文本框Textarea代码高亮插件，CodeMirror的简单实用例子

    CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件,为各种编程语言实现关键字,函数,变量等代码高亮显示,丰富的api和可扩展功能以及多个主题样式,能满足您各种项 ...

  9. 分享一个仅0.7KB的jQuery文本框输入提示插件

    由于项目需要,找过几个jQuery文本框输入提示插件来用,但总是有不满意的地方,要么体积较大,要么使用不便,要么会出现把提示文字作为文本框的值的情况.于是我们自己的开发团队制作了这个最精简易用的输入提 ...

随机推荐

  1. c语言-猜生日算法

    #include<stdio.h>int main(){ int a1[6]={1,3,5,7,9,11}; int a2[6]={2,3,6,7,10,11}; int a3[6]={4 ...

  2. Vs.net 常用命令行

    下面的是从 devenv /? 看到的   用法: devenv  [解决方案文件 | 项目文件 | 任意文件.扩展名]  [开关] devenv 的第一个参数通常是一个解决方案文件或项目文件. 如果 ...

  3. 用API爬取天气预报数据

    1.注册免费API和阅读技术文档: 注册地址:https://console.heweather.com 文档地址:https://www.heweather.com/documents/api-ur ...

  4. java中锁

    s锁的作用是就是保证线程安全,但是从另外成都讲影响了效率: 1 synchronized关键字 这个是虚拟机底层实现的, java中的关键字,内部实现为监视器锁,主要是通过对象监视器在对象头中的字段来 ...

  5. tomcat增加运行内存

    内容为: set JAVA_OPTS=%JAVA_OPTS% -server -Xms2048m -Xmx2048m -XX:PermSize=212M -XX:MaxPermSize=512m 在m ...

  6. CDQZ Day6

    1DP #2题目名称 种植 计数 棋盘 树输入文件名 plant.in count.in chess.in tree.in输出文件名 plant.out count.out chess.out tre ...

  7. webform的导出

    呃 怎么说呢  我这个是公司大佬写好的  我直接调用  和以前写的百度上面的都不大一样 感觉很Nice 插个眼 说不定以后还得回来参考参考 具体是这样的 你先写好一个模板 就是你要导出的数据应该在Ex ...

  8. MySQL数据库 053

    mysql 使用: 开启服务端软件 mysqld 开启客户端软件 mysql -uroot -p mysql : 就是一个基于socket编写的c/s架构的软件 概念介绍 : 数据库服务器 : 运行数 ...

  9. vue中nextTick的使用（转载）

    转载自:https://www.cnblogs.com/chaoyuehedy/p/8985425.html 简介 vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量 ...

  10. How to Deinstall Oracle Clusterware Home Manually

    ###sample 0:安装GI 和DB soft 都成功,如何回退DB soft [opdb@pdbdb01:/db/db/app/db/product/11204/deinstall]$ ./de ...