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

<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. iOS 逆向工程

    HOOK(钩子函数)在OCD动态化语言中使用swizzle method (交换方法来实现) 实际上静态C语言中的函数也是有办法hook的,这也说明绝对的静态语言是不存在的 Mach-O:对于每个操作 ...

  2. thinkpadT480安装archlinux

    制作U盘启动盘 下载archlinux镜像 下载powerison 将镜像刻录到U盘中 设置bios 如果已经安装了win8+系统, 开机重启然后按f1,进入设置界面,加载启动项中将usb放到最前 保 ...

  3. P3648 [APIO2014]序列分割

    传送门 首先容易证明,得分和切的顺序没有关系 所以直接默认先切左边再切右边就好了 然后显然可以 $dp$ 一开始想的是设 $f[i][j]$ 表示切了 $i$ 次,此次把 $j$ 和 $j+1$ 分开 ...

  4. 微信小程序，全局变量方法的使用

    方法一:app.js 内设置全局变量(如屏宽,屏高的设置) 1.app.js文件,定义全局变量 /定义全局变量 globalData:{ userInfo:null, sysInfo:null, wi ...

  5. Oracle SQL Developer 查询时间格式

    工具->首选项->数据库->NLS->日期格式: DD-MON-RR 修改为: YYYY-MM-DD HH24:MI:SS

  6. Unity中利用委托与监听解耦合的思路

    这篇随笔是一篇记录性的随笔,记录了从http://www.sikiedu.com/my/course/304,这门课程中学到的内容,附带了一些自己的思考. 一.单例模式的应用 首先假想一种情况,现在需 ...

  7. 014-CallbackServlet代码

    package ${enclosing_package}; import java.io.IOException; import java.util.ResourceBundle; import ja ...

  8. 《Crafting Rails 4 Applications》的笔记-第28页

    进行邮件测试,你需要在dummy目录下的虚拟程序添加一个配置 In your config/enviroments/test.rb, by default you should have the li ...

  9. Android JPush极光推送应用

    JPush纠结了5-6个小时,一直报下面的错误,纠结! [AndroidUtil] AndroidManifest.xml missing required intent filter for Pus ...

  10. zato集群部署

    注: SQL ODB和Cluster’s config需要首先依次创建,其他三个次序随意 对不熟悉的命令,使用server create *** -h 查看帮助文档 修改完后配置文件,要重启(zato ...