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

<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. P1975 [国家集训队]排队 线段树套平衡树维护动态逆序对查询

    $ \color{#0066ff}{ 题目描述 }$ 排排坐,吃果果,生果甜嗦嗦,大家笑呵呵.你一个,我一个,大的分给你,小的留给我,吃完果果唱支歌,大家乐和和. 红星幼儿园的小朋友们排起了长长地队伍 ...

  2. 三种简单的html网页自动跳转方法

    三种简单的html网页自动跳转方法,可以让你在打开一个html网页时自动跳转到其它的页面. 方法/步骤   <html> <head> <title>正在跳转< ...

  3. TX1/TX2 Qt安装与配置

    安装Qt 安装Qt Creator,打开终端执行如下命令: sudo apt-get install qt5-default qtcreator -y 安装Qt示例和文档: sudo apt-get ...

  4. python高级（三）—— 字典和集合（泛映射类型）

    本文主要内容 可散列类型 泛映射类型 字典 (1)字典推导式 (2)处理不存在的键 (3)字典的变种 集合 映射的再讨论 python高级——目录 文中代码均放在github上:https://git ...

  5. centos的基本命令02

    16:查看系统运行的进程 ps -ef 17:查看系统已开放的端口 netstat -tunlp 18:管道命令 ps -ef | grep tom # 查看系统中与tom相关的进程 19:grep过 ...

  6. 常见浏览器hack汇总

    1.背景渐变bug: ①.ie8 ie9:用滤镜的方式解决: -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientT ...

  7. git泄露利用脚本

    留一下万一之后用得着呢 工作原理 1.解析.git/index文件,找到工程中所有的: ( 文件名,文件sha1 ) 2.去.git/objects/ 文件夹下下载对应的文件 3.zlib解压文件,按 ...

  8. centos安装postgresql-rpm

    rpm -ivh pgdg-centos93-9.3-3.noarch.rpm确认,回车,

  9. Rancher 1.6 版本 只能在 linux 下用

    实际操作 启动 , 访问方式 : 在启动过程中会发现没有 image , 然后自动下载 ( 执行 docker pull 命令 ) docker run --rm --privileged -v /v ...

  10. 浏览器获取WEB服务器时间

    /* * 获取XMLHttpRequest对象 */ function CreateXMLHttpRequest() { var xmlreq = false; if (window.ActiveXO ...