jquery实现文本框textarea自适应高度
88066525 2016-03-09
浏览器中默认的文本框是不能根据内容的增多变高，只能固定高度有滚动条，体验不是很好，找了很多方法兼容都不行，总算找到个兼容良好的方法：
<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程序设计有所帮助。
相关推荐
如狼 0喜欢 / 0评论 2020-08-15
csstpeixun 0喜欢 / 0评论 2020-08-07
anyushan 0喜欢 / 0评论 2020-06-30
zego实时音视频 0喜欢 / 0评论 2020-06-23
oKeYue 0喜欢 / 0评论 2020-06-14
xiaoxiaokeke 0喜欢 / 0评论 2020-05-19
AlisaClass 0喜欢 / 0评论 2020-05-16
Justdoit00 0喜欢 / 0评论 2020-04-26
rionchen 0喜欢 / 0评论 2020-04-09
86384798 0喜欢 / 0评论 2020-04-04
贤冰 0喜欢 / 0评论 2020-03-08
云端漂移 0喜欢 / 0评论 2020-03-05
数据与算法之美 0喜欢 / 0评论 2020-01-23
yuanran0 0喜欢 / 0评论 2019-12-25
nicepainkiller 0喜欢 / 0评论 2019-12-24
mapaler 0喜欢 / 0评论 2019-12-23
CaiKanXP 0喜欢 / 0评论 2019-12-21
wangjie 0喜欢 / 0评论 2019-12-01
我只是个程序员 0喜欢 / 0评论 2014-01-18
huohu00 0喜欢 / 0评论 2013-07-11
lumitzs 0喜欢 / 0评论 2013-08-29
kingzone 0喜欢 / 0评论 2019-11-13
张骞 0喜欢 / 0评论 2014-06-22
dongyang0 0喜欢 / 0评论 2019-11-03
yishujixiaoxiao 0喜欢 / 0评论 2019-11-01
后乐 0喜欢 / 0评论 2014-12-09
来斌 0喜欢 / 0评论 2019-10-08
如狼 0喜欢 / 0评论 2019-09-27
覆雪蓝枫 0喜欢 / 0评论 2015-05-17
Eppley 0喜欢 / 0评论 2019-06-18
贱贱的梦想 0喜欢 / 0评论 2017-10-15
hck0ne 0喜欢 / 0评论 2019-03-09
yixiaof 0喜欢 / 0评论 2019-09-05
liusure0 0喜欢 / 0评论 2007-09-13
不良牛 0喜欢 / 0评论 2007-09-13
前端小讴 0喜欢 / 0评论 2007-09-13
wcssdu 0喜欢 / 0评论 2018-09-21
86384798 0喜欢 / 0评论 2019-09-02
Jiminull 0喜欢 / 0评论 2016-08-15
lwpkjio 0喜欢 / 0评论 2015-11-02
80296630 0喜欢 / 0评论 2015-10-14
edwardhyl 0喜欢 / 0评论 2015-08-18
loverlucky 0喜欢 / 0评论 2016-02-24
后乐 0喜欢 / 0评论 2014-12-09