文本框的字?jǐn)?shù)限制功能jquery插件
更新時(shí)間：2009年11月24日 21:05:34 作者：
由于Html里只有input元素?fù)碛衜axlength屬性，而textarea沒(méi)有,所以以前對(duì)于文本框字?jǐn)?shù)限制做了很多方案的解決，但是都不太完美。
后來(lái)在網(wǎng)上閑逛的時(shí)候突然發(fā)現(xiàn)一個(gè)比較好的文本框的字?jǐn)?shù)限制的jquery plugin，簡(jiǎn)單好用
效果如下圖
<!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>關(guān)于文本框的字?jǐn)?shù)限制功能</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="maxlength.js"></script>
</head>
<body>
<p>Enter your hobbies (<50 characters)</p>
<textarea style="width:300px; height:150px" data-maxsize="50" data-output="status1" wrap="virtual"></textarea><br />
<div id="status1" style="width:300px;font-weight:bold;text-align:right"></div><br />
<p>Enter your postal code (<6 characters)</p>
<input type="text" name="T1" size="15" data-maxsize="6">
</body>
</html>
屬性解釋:
data-maxsize:該文本域能夠接受的最大字?jǐn)?shù).(important)
data-output:如果想實(shí)時(shí)動(dòng)態(tài)顯示文本框里的字?jǐn)?shù)，該屬性設(shè)置顯示字?jǐn)?shù)的span或div的id.(字?jǐn)?shù)顯示的顏色會(huì)隨著數(shù)量變化)
如果不修改它的源文件的話，加添了js引用后，你只需要給自己的text或者textarea加上data-maxsize屬性就可以了。
關(guān)于動(dòng)態(tài)設(shè)置最大值
使用setformfieldsize方法：
setformfieldsize($field, maxsize, outputfieldid)
屬性解釋:
$field:就是被限制的文本框的JQuery對(duì)象(參考Jquery文檔).
maxsize:和data-maxsize一樣,該文本域能夠接受的最大字?jǐn)?shù).
outputfieldid:和data-output一樣.
例子:
<script type="text/javascript">
//jQuery(document).ready(function($){ //fire on DOM ready
setformfieldsize(jQuery('#comment'), 50, 'charsremain')
//});
</script>
在界面加載時(shí)執(zhí)行.
演示代碼下載http://xiazai.jb51.net/200911/yuanma/textarea_maxlength.rar
效果如下圖
復(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>關(guān)于文本框的字?jǐn)?shù)限制功能</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="maxlength.js"></script>
</head>
<body>
<p>Enter your hobbies (<50 characters)</p>
<textarea style="width:300px; height:150px" data-maxsize="50" data-output="status1" wrap="virtual"></textarea><br />
<div id="status1" style="width:300px;font-weight:bold;text-align:right"></div><br />
<p>Enter your postal code (<6 characters)</p>
<input type="text" name="T1" size="15" data-maxsize="6">
</body>
</html>
屬性解釋:
data-maxsize:該文本域能夠接受的最大字?jǐn)?shù).(important)
data-output:如果想實(shí)時(shí)動(dòng)態(tài)顯示文本框里的字?jǐn)?shù)，該屬性設(shè)置顯示字?jǐn)?shù)的span或div的id.(字?jǐn)?shù)顯示的顏色會(huì)隨著數(shù)量變化)
如果不修改它的源文件的話，加添了js引用后，你只需要給自己的text或者textarea加上data-maxsize屬性就可以了。
關(guān)于動(dòng)態(tài)設(shè)置最大值
使用setformfieldsize方法：
setformfieldsize($field, maxsize, outputfieldid)
屬性解釋:
$field:就是被限制的文本框的JQuery對(duì)象(參考Jquery文檔).
maxsize:和data-maxsize一樣,該文本域能夠接受的最大字?jǐn)?shù).
outputfieldid:和data-output一樣.
例子:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
//jQuery(document).ready(function($){ //fire on DOM ready
setformfieldsize(jQuery('#comment'), 50, 'charsremain')
//});
</script>
在界面加載時(shí)執(zhí)行.
演示代碼下載http://xiazai.jb51.net/200911/yuanma/textarea_maxlength.rar
相關(guān)文章
使用jQuery 操作table 完成單元格合并的實(shí)例
下面小編就為大家分享一篇使用jQuery 操作table 完成單元格合并的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
jQuery Autocomplete自動(dòng)完成插件
jQuery Autocomplete plugin 寫(xiě)的比較滿意，拿出來(lái)分享，歡迎大家找BUG。2010-07-07
jquery實(shí)現(xiàn)拖拽table表頭改變列寬
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)拖拽table表頭改變列寬，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
jquery分頁(yè)插件jquery.pagination.js使用方法解析
這篇文章主要針對(duì)js分頁(yè)插件jquery.pagination.js使用方法進(jìn)行解析，很實(shí)用的分頁(yè)插件，感興趣的小伙伴們可以參考一下2016-04-04
JQuery插件jcarousellite的參數(shù)中文說(shuō)明
這篇文章主要介紹了JQuery插件jcarousellite的參數(shù)中文說(shuō)明,本文分別給出各個(gè)參數(shù)的含義,需要的朋友可以參考下2015-05-05
jQuery操作Select選擇的Text和Value(獲取/設(shè)置/添加/刪除)
本文將詳細(xì)介紹下jQuery獲取/設(shè)置/添加/刪除Select選擇的Text和Value,感興趣的你可以參考下本文或許對(duì)你有所幫助2013-03-03
滾動(dòng)圖片效果 jquery實(shí)現(xiàn)回旋滾動(dòng)效果
jquery滾動(dòng)圖片效果,有些新手朋友可能不是很清楚，今天在網(wǎng)上找到一款回旋滾動(dòng)效果，拿出來(lái)和大家一起分享，感興趣的朋友可以了解下哦2013-01-01
這篇文章主要介紹了使用jQuery制作基礎(chǔ)的Web圖片輪播效果的實(shí)例,鼠標(biāo)懸停時(shí)可停止而離開(kāi)時(shí)可自動(dòng)輪播,文中還介紹了一種使用zslider插件來(lái)實(shí)現(xiàn)的方法,比較犀利,需要的朋友可以參考下2016-04-04
Jquery+ajax+JAVA(servlet)實(shí)現(xiàn)下拉菜單異步取值
這篇文章主要介紹了Jquery+ajax+JAVA(servlet)實(shí)現(xiàn)下拉菜單異步取值的相關(guān)資料,需要的朋友可以參考下2016-03-03
jQuery UI Bootstrap是什么?jQuery UI Bootstrap是一個(gè)將jQuery UI集成到Bootstrap上的CSS框架,具體內(nèi)容請(qǐng)看下文2016-06-06