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