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

<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. P4173 残缺的字符串

    题目链接 题意分析 啥 ? ? ? \(FFT\)做字符串匹配 可是就是这样 我们定义匹配函数 我们定义\(A\)是匹配串 \(B\)是被匹配串 我们当前到达\(B\)串的\(x\)位置 \[P(x) ...

  2. 一次http请求响应流程

    前端客户端 发起http请求 web服务器接收并解析http报文 通过WSGI协议发送给web框架 web框架创建请求对象 中间层处理 具体的视图处理-业务处理 中间层处理 创建http响应对象 返回 ...

  3. expect分发脚本

    [分发系统]yum -y install expect #!/usr/bin/expect set host "192.168.11.102" " spawn ssh r ...

  4. css第一篇：元素选择器

    1:多个选择器 h1, h2 {}       ——h1或h2标签的所有元素 2:通配选择器 * {}     ——所有元素 3:元素选择器 div {}   ——所有div元素 4:类选择器 .te ...

  5. Pycharm与github的秘密

    GIT介绍 GIT文章请看老男孩教育-银角大王的博客: http://www.cnblogs.com/wupeiqi/articles/7295372.html Git 是一个开源的分布式版本控制软件 ...

  6. bzoj 4032(A的一个最短的子串，它不是B的子串 || A的一个最短的子串，它不是B的子序列 || A的一个最短的子序列，它不是B的子串||A的一个最短的子序列，它不是B的子序列)

    在虐各种最长公共子串.子序列的题虐的不耐烦了之后,你决定反其道而行之. 一个串的“子串”指的是它的连续的一段,例如bcd是abcdef的子串,但bde不是. 一个串的“子序列”指的是它的可以不连续的一 ...

  7. element-ui多层嵌套表格数据删除

    很多表格都要一个移除的功能,所谓移除,就是前端把表格的数据删除,普通的表格删除很简单,调用数据的删除方法就行.但是当表格是多层的嵌套类型时,就不能再使用普通的删除方法了.下面介绍一种自己在项目中用的方 ...

  8. 记.net 遇到的几个bug

    这两个bug都是查了挺久才查到的,随手记是个好习惯. 1.public static CultureInfo GetCultureInfo(string name); 方法,传参错误时,某些操作系统环 ...

  9. hadoop踩坑：localhost:50070 无法访问 关闭防火墙

    ubuntu 关闭防火墙:ufw disable hadoop3.0以下版本web访问端口50070:3.0及以上web访问端口9870 参考链接:https://blog.csdn.net/qq_3 ...

  10. 换个角度看Salesforce之基础配置学习笔记(一)

    1. Salesforce.com与force.com的关系: Salesforce.com is build on the force.com platform seamlessly.That is ...