jquery实现文本框textarea自适应高度
更新时间：2016年03月09日 10:07:01 作者：彼岸花在开
这篇文章主要介绍了jquery实现文本框textarea自适应高度的相关资料,需要的朋友可以参考下
浏览器中默认的文本框是不能根据内容的增多变高，只能固定高度有滚动条，体验不是很好，找了很多方法兼容都不行，总算找到个兼容良好的方法：
<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程序设计有所帮助。
相关文章
js函数中有三个在特定场合很好用的函数:reduce(),map(),filter()。而数组经常用到的方法有push、join、indexOf、slice等等，但是有一个经常被我们忽略的方法：reduce，这个方法简直强大的不要不要的。下面通过这篇文章来一起学习学习吧。2016-12-12
这篇文章主要介绍了JavaScript控制图片加载完成后调用回调函数的方法,实例分析了javascript回调函数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
下面小编就为大家带来一篇Js利用Canvas实现图片压缩功能。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
下面小编就为大家带来一篇原生JS 购物车及购物页面的cookie使用方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了JS集合set类的实现与使用方法,结合具体实例形式分析了javascript集合的创建、元素添加、删除以及并集、交集、补集等运算相关操作技巧,需要的朋友可以参考下2019-02-02
词法作用域就是定义在词法阶段的作用域,如果词法作用域完全由写代码期间函数所声明的位置来定义,怎样才能在运行时来“修改”（也可以说欺骗）词法作用域呢?JavaScript 中有两种机制来实现这个目的,感兴趣的朋友跟随小编一起看看吧2023-10-10
这篇文章主要介绍了JavaScript中防抖和节流的区别及适用场景，文章通过围绕主题的相关资料展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-05-05
本章主要介绍通过JavaScript读取图片的例子，本例子不包含服务器端后台代码，只包含前台页面代码，所以直接用Html文件就可以，代码如下，因为包含详细的注意，所以不再详细说明了，如果有看不明白的，可以给我留言，我给大家具体答复。2009-11-11
这篇文章主要介绍了Javascript中拼接大量字符串的方法,本文实现的就是JS语言中的Heredoc语法,需要的朋友可以参考下2015-02-02
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
auto.js是一个支持无障碍服务的Android平台上的JavaScript IDE，可以编写各种自动化脚本，这篇文章主要介绍了Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能,需要的朋友可以参考下2020-05-05
最新评论