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

<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 ...