快捷導(dǎo)航

jquery插件制作自增長輸入框?qū)崿F(xiàn)代碼

更新時(shí)間：2012年08月17日 15:35:49 作者：

本章我們將創(chuàng)建一個(gè)自增長的輸入框插件，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> 

接下來是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)容長度和寬度 
var lastValLength, lastWidth; 
//文本框內(nèi)容長度、寬度和高度 
var valLength, width, height; 
//驗(yàn)證頁面元素是textarea 
if (!element.is('textarea')) { 
return; 
} 
element.css('overflow', 'hidden')//設(shè)置超出范圍的文字隱藏 
.keyup(function () {//設(shè)置鍵盤彈起事件 
//獲取文本框內(nèi)容長度 
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)前文本框的高度超過我們允許的最大高度的時(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); 

例子比較簡單，就是當(dāng)你往文本框里輸入信息的時(shí)候，文本框的高度會(huì)根據(jù)情況自動(dòng)增長。
　　建議大家在看懂代碼的基礎(chǔ)上，還是自己動(dòng)手寫一遍代碼，一來可以加深記憶，二來或許會(huì)遇到一些特殊情況，或許自己的demo運(yùn)行不成功。通過努力，讓自己的demo運(yùn)行成功，你的js能力也就提升了。
demo下載地址：jQuery.plugin.autogrow

您可能感興趣的文章: