jquery實現(xiàn)文本框textarea自適應(yīng)高度
更新時間：2016年03月09日 10:07:01 作者：彼岸花在開
這篇文章主要介紹了jquery實現(xiàn)文本框textarea自適應(yīng)高度的相關(guān)資料,需要的朋友可以參考下
瀏覽器中默認(rèn)的文本框是不能根據(jù)內(nèi)容的增多變高，只能固定高度有滾動條，體驗不是很好，找了很多方法兼容都不行，總算找到個兼容良好的方法：
<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() {
//最小高度和最大高度默認(rèn)
$("#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>
以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)jquery程序設(shè)計有所幫助。
相關(guān)文章
淺析Javascript中雙等號(==)隱性轉(zhuǎn)換機制
這篇文章給大家詳細(xì)介紹了javascript中雙等號(==)隱性轉(zhuǎn)換機制，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-10-10
這篇文章主要介紹了JavaScript極簡入門教程（一）：基礎(chǔ)篇,本文講解了JavaScript的基礎(chǔ)語法、操作符、運算符等內(nèi)容,需要的朋友可以參考下2014-10-10
node.js chat程序如何實現(xiàn)Ajax long-polling長鏈接刷新模式
node.js chat是node.js作者用JS寫的一個多人聊天工具， 源代碼公開下載，網(wǎng)址是chat.nodejs.org。作者用這個小例子，來展示如何用nodejs開發(fā)高效率的應(yīng)用程序。對于nodejs的學(xué)習(xí)者來說，是一個很好的例子2012-03-03
微信小程序?qū)崿F(xiàn)組件頂端固定或底端固定效果(不隨滾動而滾動)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)組件頂端固定或底端固定效果(不隨滾動而滾動)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了JavaScript中的值類型詳細(xì)介紹,本文講解了Primitive、Object、JS自帶全局對象、Immutable與Mutable等內(nèi)容,需要的朋友可以參考下2014-12-12
js對象實例詳解(JavaScript對象深度剖析,深度理解js對象)
下面小編就為大家?guī)硪黄猨s對象實例詳解(JavaScript對象深度剖析,深度理解js對象)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
本文為大家介紹下為何如果在頁面加載完后如果調(diào)用document.write就會覆蓋整個文檔2014-03-03
javascript中String對象的slice()方法分析
這篇文章主要介紹了javascript中String對象的slice()方法,以實例形式分析了slice()方法的定義、參數(shù)與具體用法,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
這篇文章主要為大家介紹了uniapp解決軟鍵盤彈出問題方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
JavaScript支持的最大遞歸調(diào)用次數(shù)分析
這篇文章主要介紹了JavaScript支持的最大遞歸調(diào)用次數(shù)分析,也稱JavaScript支持的最大堆棧數(shù)量,需要的朋友可以參考下2014-06-06