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程序设计有所帮助。
相关文章
这篇文章给大家详细介绍了javascript中双等号(==)隐性转换机制，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-10-10
这篇文章主要介绍了JavaScript极简入门教程（一）：基础篇,本文讲解了JavaScript的基础语法、操作符、运算符等内容,需要的朋友可以参考下2014-10-10
node.js chat程序如何实现Ajax long-polling长链接刷新模式
node.js chat是node.js作者用JS写的一个多人聊天工具， 源代码公开下载，网址是chat.nodejs.org。作者用这个小例子，来展示如何用nodejs开发高效率的应用程序。对于nodejs的学习者来说，是一个很好的例子2012-03-03
这篇文章主要介绍了微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了JavaScript中的值类型详细介绍,本文讲解了Primitive、Object、JS自带全局对象、Immutable与Mutable等内容,需要的朋友可以参考下2014-12-12
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
下面小编就为大家带来一篇js对象实例详解(JavaScript对象深度剖析,深度理解js对象)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
本文为大家介绍下为何如果在页面加载完后如果调用document.write就会覆盖整个文档2014-03-03
javascript中String对象的slice()方法分析
这篇文章主要介绍了javascript中String对象的slice()方法,以实例形式分析了slice()方法的定义、参数与具体用法,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
这篇文章主要为大家介绍了uniapp解决软键盘弹出问题方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要介绍了JavaScript支持的最大递归调用次数分析,也称JavaScript支持的最大堆栈数量,需要的朋友可以参考下2014-06-06
最新评论