jquery實(shí)現(xiàn)文本框textarea自適應(yīng)高度
更新時(shí)間：2016年03月09日 10:07:01 作者：彼岸花在開
這篇文章主要介紹了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>
以上就是本文的全部內(nèi)容，希望對(duì)大家學(xué)習(xí)jquery程序設(shè)計(jì)有所幫助。
相關(guān)文章
js函數(shù)中有三個(gè)在特定場合很好用的函數(shù):reduce(),map(),filter()。而數(shù)組經(jīng)常用到的方法有push、join、indexOf、slice等等，但是有一個(gè)經(jīng)常被我們忽略的方法：reduce，這個(gè)方法簡直強(qiáng)大的不要不要的。下面通過這篇文章來一起學(xué)習(xí)學(xué)習(xí)吧。2016-12-12
JavaScript控制圖片加載完成后調(diào)用回調(diào)函數(shù)的方法
這篇文章主要介紹了JavaScript控制圖片加載完成后調(diào)用回調(diào)函數(shù)的方法,實(shí)例分析了javascript回調(diào)函數(shù)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
下面小編就為大家?guī)硪黄狫s利用Canvas實(shí)現(xiàn)圖片壓縮功能。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
下面小編就為大家?guī)硪黄鶭S 購物車及購物頁面的cookie使用方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了JS集合set類的實(shí)現(xiàn)與使用方法,結(jié)合具體實(shí)例形式分析了javascript集合的創(chuàng)建、元素添加、刪除以及并集、交集、補(bǔ)集等運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
詞法作用域就是定義在詞法階段的作用域,如果詞法作用域完全由寫代碼期間函數(shù)所聲明的位置來定義,怎樣才能在運(yùn)行時(shí)來“修改”（也可以說欺騙）詞法作用域呢?JavaScript 中有兩種機(jī)制來實(shí)現(xiàn)這個(gè)目的,感興趣的朋友跟隨小編一起看看吧2023-10-10
JavaScript中防抖和節(jié)流的區(qū)別及適用場景
這篇文章主要介紹了JavaScript中防抖和節(jié)流的區(qū)別及適用場景，文章通過圍繞主題的相關(guān)資料展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-05-05
本章主要介紹通過JavaScript讀取圖片的例子，本例子不包含服務(wù)器端后臺(tái)代碼，只包含前臺(tái)頁面代碼，所以直接用Html文件就可以，代碼如下，因?yàn)榘敿?xì)的注意，所以不再詳細(xì)說明了，如果有看不明白的，可以給我留言，我給大家具體答復(fù)。2009-11-11
這篇文章主要介紹了Javascript中拼接大量字符串的方法,本文實(shí)現(xiàn)的就是JS語言中的Heredoc語法,需要的朋友可以參考下2015-02-02
Auto.JS實(shí)現(xiàn)抖音刷寶等刷視頻app,自動(dòng)點(diǎn)贊,自動(dòng)滑屏,自動(dòng)切換視頻功能
auto.js是一個(gè)支持無障礙服務(wù)的Android平臺(tái)上的JavaScript IDE，可以編寫各種自動(dòng)化腳本，這篇文章主要介紹了Auto.JS實(shí)現(xiàn)抖音刷寶等刷視頻app,自動(dòng)點(diǎn)贊,自動(dòng)滑屏,自動(dòng)切換視頻功能,需要的朋友可以參考下2020-05-05