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