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

<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. 2016级算法第二次上机-A.画个圈圈诅咒你

    890 画个圈圈诅咒你 思路 简单题.题目中的圆并没有什么实际作用,简化成线段重合问题会更好理解些. 暴力解法:使用双重for循环会T到想哭,记住最直接的方法一般是过不了题的. 解法一:二分查找.空间 ...

  2. Codeforces - 规律题 [占坑]

    发现自己容易被卡水题,需要强行苟一下规律题 CF上并没有对应的tag,所以本题集大部分对应百毒搜索按顺序刷 本题集侧重于找规律的过程(不然做这些垃圾题有什么用) Codeforces - 1008C ...

  3. Flask基础应用

    一. Python 现阶段三大主流Web框架 Django Tornado Flask 对比 Django: 优点: 大而全,组件非常全面. 缺点: 太大,加载太大,浪费资源. Flask: 优点: ...

  4. lvm拉伸与快照

    一.拉伸 *用fdisk分区 *构建pv *将pv加入vg *将pv内的pe加入lv *通过resize将文件系统的容量增加 1.分区 [root@server3 ~]# fdisk /dev/vdb ...

  5. Scrapy——settings配置文件

    # -*- coding: utf-8 -*- # Scrapy settings for tencent project # # For simplicity, this file contains ...

  6. /data/tomcat8/bin/setenv.sh

    --问题 Java HotSpot(TM) 64-Bit Server VM warning: ignoring option MaxPermSize=512m; support was remove ...

  7. 使用FCM服务

    1.建谷歌账号 2.在console上新建应用 https://console.firebase.google.com 并下载私钥.json 3.创建测试网页应用 (或app应用) C#服务端: 用H ...

  8. 转: 将Eclipse代码导入到AndroidStudio的两种方式 ，测试了方法2，成功。

    蛋疼,不知道为什么我的eclipse的logcat总是莫名其妙的显示一堆黄色字体的字,看不懂的那种,如下图: 然后查了一下资料,说可能是adt版本太低,手机系统太高. 然后本来想升级adt,但是各种折 ...

  9. Druid SQL 解析器概览

    概览 Druid 的官方 wiki 对 SQL 解析器部分的讲解内容并不多,但虽然不多,也有利于完全没接触过 Druid 的人对 SQL 解析器有个初步的印象. 说到解析器,脑海里便很容易浮现 par ...

  10. 带有Apache Spark的Lambda架构

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 目标 市场上的许多玩家已经建立了成功的MapReduce工作流程来每天处理以TB计的历史数据.但是谁愿意等待24小时才能获得最新的分析结果? ...