jquery插件制作 自增長(zhǎng)輸入框?qū)崿F(xiàn)代碼
更新時(shí)間:2012年08月17日 15:35:49 作者:
本章我們將創(chuàng)建一個(gè)自增長(zhǎng)的輸入框插件,jquery.aotogrow.js
首先還是看html代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.autogrow.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#autogrow').autogrow();
});
</script>
</head>
<body>
<form action="#" method="post">
<fieldset>
<legend>auto growing textarea</legend>
<textarea id="autogrow" cols="20" rows="4">this textarea will grow indefinitely.</textarea>
</fieldset>
</form>
</body>
</html>
接下來(lái)是js插件代碼:
(function ($) {
$.fn.autogrow = function (options) {
var defaults = {
minHeight: 0,
maxHeight: 9999
};
var options = $.extend(defaults, options);
return this.each(function () {
var element = $(this);
//上一次文本框內(nèi)容長(zhǎng)度和寬度
var lastValLength, lastWidth;
//文本框內(nèi)容長(zhǎng)度、寬度和高度
var valLength, width, height;
//驗(yàn)證頁(yè)面元素是textarea
if (!element.is('textarea')) {
return;
}
element.css('overflow', 'hidden')//設(shè)置超出范圍的文字隱藏
.keyup(function () {//設(shè)置鍵盤彈起事件
//獲取文本框內(nèi)容長(zhǎng)度
valLength = $(this).val().length;
//獲取輸入框的寬度
//我這里使用的jquery版本是1.8,獲取css屬性的方法已經(jīng)變成了prop
//如果使用1.6以下版本的jquery,以下代碼要變?yōu)?width = $(this).attr('offsetWidth');
//$(this).prop('scrollHeight')也要變?yōu)椋?(this).attr('scrollHeight')
width = $(this).prop('offsetWidth');
//有文字刪除操作,或者文本框?qū)挾茸兓臅r(shí)候,先將文本框高度設(shè)置為0
if (valLength < lastValLength || width != lastWidth) {
$(this).height(0);
}
//計(jì)算適合的文本框高度
height = Math.max(options.minHeight, Math.min($(this).prop('scrollHeight'), options.maxHeight));
//如果當(dāng)前文本框的高度超過(guò)我們?cè)试S的最大高度的時(shí)候,隱藏多余文字;否則設(shè)置為auto
//$(this).prop('scrollHeight') > height 只有在height取得的值是options.maxHeight才有意義
$(this).css('overflow', ($(this).prop('scrollHeight') > height ? 'auto' : 'hidden'))
.height(height); //設(shè)置文本框高度
lastValLength = valLength;
lastWidth = width;
});
});
}
})(jQuery);
例子比較簡(jiǎn)單,就是當(dāng)你往文本框里輸入信息的時(shí)候,文本框的高度會(huì)根據(jù)情況自動(dòng)增長(zhǎng)。
建議大家在看懂代碼的基礎(chǔ)上,還是自己動(dòng)手寫一遍代碼,一來(lái)可以加深記憶,二來(lái)或許會(huì)遇到一些特殊情況,或許自己的demo運(yùn)行不成功。通過(guò)努力,讓自己的demo運(yùn)行成功,你的js能力也就提升了。
demo下載地址:jQuery.plugin.autogrow
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.autogrow.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#autogrow').autogrow();
});
</script>
</head>
<body>
<form action="#" method="post">
<fieldset>
<legend>auto growing textarea</legend>
<textarea id="autogrow" cols="20" rows="4">this textarea will grow indefinitely.</textarea>
</fieldset>
</form>
</body>
</html>
接下來(lái)是js插件代碼:
復(fù)制代碼 代碼如下:
(function ($) {
$.fn.autogrow = function (options) {
var defaults = {
minHeight: 0,
maxHeight: 9999
};
var options = $.extend(defaults, options);
return this.each(function () {
var element = $(this);
//上一次文本框內(nèi)容長(zhǎng)度和寬度
var lastValLength, lastWidth;
//文本框內(nèi)容長(zhǎng)度、寬度和高度
var valLength, width, height;
//驗(yàn)證頁(yè)面元素是textarea
if (!element.is('textarea')) {
return;
}
element.css('overflow', 'hidden')//設(shè)置超出范圍的文字隱藏
.keyup(function () {//設(shè)置鍵盤彈起事件
//獲取文本框內(nèi)容長(zhǎng)度
valLength = $(this).val().length;
//獲取輸入框的寬度
//我這里使用的jquery版本是1.8,獲取css屬性的方法已經(jīng)變成了prop
//如果使用1.6以下版本的jquery,以下代碼要變?yōu)?width = $(this).attr('offsetWidth');
//$(this).prop('scrollHeight')也要變?yōu)椋?(this).attr('scrollHeight')
width = $(this).prop('offsetWidth');
//有文字刪除操作,或者文本框?qū)挾茸兓臅r(shí)候,先將文本框高度設(shè)置為0
if (valLength < lastValLength || width != lastWidth) {
$(this).height(0);
}
//計(jì)算適合的文本框高度
height = Math.max(options.minHeight, Math.min($(this).prop('scrollHeight'), options.maxHeight));
//如果當(dāng)前文本框的高度超過(guò)我們?cè)试S的最大高度的時(shí)候,隱藏多余文字;否則設(shè)置為auto
//$(this).prop('scrollHeight') > height 只有在height取得的值是options.maxHeight才有意義
$(this).css('overflow', ($(this).prop('scrollHeight') > height ? 'auto' : 'hidden'))
.height(height); //設(shè)置文本框高度
lastValLength = valLength;
lastWidth = width;
});
});
}
})(jQuery);
例子比較簡(jiǎn)單,就是當(dāng)你往文本框里輸入信息的時(shí)候,文本框的高度會(huì)根據(jù)情況自動(dòng)增長(zhǎng)。
建議大家在看懂代碼的基礎(chǔ)上,還是自己動(dòng)手寫一遍代碼,一來(lái)可以加深記憶,二來(lái)或許會(huì)遇到一些特殊情況,或許自己的demo運(yùn)行不成功。通過(guò)努力,讓自己的demo運(yùn)行成功,你的js能力也就提升了。
demo下載地址:jQuery.plugin.autogrow
您可能感興趣的文章:
- 強(qiáng)烈推薦240多個(gè)jQuery插件提供下載
- 跟我一起學(xué)寫jQuery插件開(kāi)發(fā)方法(附完整實(shí)例及下載)
- 分享20多個(gè)很棒的jQuery 文件上傳插件或教程
- jquery插件制作 手風(fēng)琴Panel效果實(shí)現(xiàn)
- jquery插件制作 圖片走廊 gallery
- jquery插件制作 表單驗(yàn)證實(shí)現(xiàn)代碼
- 一個(gè)簡(jiǎn)單的jQuery插件制作 學(xué)習(xí)過(guò)程及實(shí)例
- 一步一步制作jquery插件Tabs實(shí)現(xiàn)過(guò)程
- jquery tab插件制作實(shí)現(xiàn)代碼
- jquery插件制作 提示框插件實(shí)現(xiàn)代碼
- jQuery焦點(diǎn)圖切換簡(jiǎn)易插件制作過(guò)程全紀(jì)錄
- 基于jquery插件制作左右按鈕與標(biāo)題文字圖片切換效果
- jquery插件格式實(shí)例分析
相關(guān)文章
jQuery插件passwordStrength密碼強(qiáng)度指標(biāo)詳解
這篇文章主要為大家詳細(xì)介紹了jQuery插件passwordStrength密碼強(qiáng)度指標(biāo)實(shí)現(xiàn)代碼,感興趣的小伙伴們可以參考一下2016-06-06jQuery超簡(jiǎn)單遮罩層實(shí)現(xiàn)方法示例
這篇文章主要介紹了jQuery超簡(jiǎn)單遮罩層實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了jQuery遮罩層相關(guān)屬性樣式動(dòng)態(tài)控制操作技巧,需要的朋友可以參考下2018-09-09jQuery實(shí)現(xiàn)的自定義輪播圖功能詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)的自定義輪播圖功能,結(jié)合實(shí)例形式詳細(xì)分析了輪播圖的原理、實(shí)現(xiàn)步驟及相關(guān)操作技巧,需要的朋友可以參考下2018-12-12全面解析jQuery $(document).ready()和JavaScript onload事件
這篇文章主要介紹了全面解析jQuery $(document).ready()和JavaScript onload事件的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06jQuery漸變發(fā)光導(dǎo)航菜單的實(shí)例代碼
今天介紹一個(gè)jQuery漸變發(fā)光效果的導(dǎo)航菜單,這是一個(gè)簡(jiǎn)單的通過(guò)jQuery控制opacity實(shí)現(xiàn)的導(dǎo)航菜單。2013-03-03jQuery+Cookie實(shí)現(xiàn)切換皮膚功能【附源碼下載】
這篇文章主要介紹了jQuery+Cookie實(shí)現(xiàn)切換皮膚功能,結(jié)合完整實(shí)例形式分析了jQuery結(jié)合cookie動(dòng)態(tài)變換頁(yè)面元素樣式的相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2018-03-03jQuery設(shè)置div一直在頁(yè)面頂部顯示的方法
如何讓div一直在頁(yè)面頂部,這種類似的效果大家都有見(jiàn)過(guò)的,實(shí)現(xiàn)的方法也有很多,在本文為大家詳細(xì)介紹下使用jquery是如何實(shí)現(xiàn)的,感興趣的朋友不要錯(cuò)過(guò)2013-10-10