JQuery為textarea添加maxlength屬性的代碼
更新時(shí)間:2010年04月07日 13:55:50 作者:
textarea默認(rèn)不支持maxlength屬性。所以通過jquery實(shí)現(xiàn)下。具體的看代碼。
通過JQuery的keyup事件:
<html>
<head>
<title>JQuery為textarea添加maxlength</title>
<script type="text/javascript" src="jquery-1.4.js"></script>
</head>
<body>
<textarea style="width:300px; height:60px;" maxlength="10"></textarea>
</body>
</html>
<script type="text/javascript">
$(function(){
$("textarea[maxlength]").keyup(function(){
var area=$(this);
var max=parseInt(area.attr("maxlength"),10); //獲取maxlength的值
if(max>0){
if(area.val().length>max){ //textarea的文本長度大于maxlength
area.val(area.val().substr(0,max)); //截?cái)鄑extarea的文本重新賦值
}
}
});
});
</script>
如果只用keyup只能判斷鍵盤輸入的maxlength,利用鼠標(biāo)的粘貼還是可以超過maxlength的限制,可以利用blur事件做判斷:
$("textarea[maxlength]").blur(function(){
var area=$(this);
var max=parseInt(area.attr("maxlength"),10); //獲取maxlength的值
if(max>0){
if(area.val().length>max){ //textarea的文本長度大于maxlength
area.val(area.val().substr(0,max)); //截?cái)鄑extarea的文本重新賦值
}
}
});
失去焦點(diǎn)后截?cái)鄑extarea的文本。
通過blur事件判斷后還是有問題,如果是粘貼后直接提交而沒有做對textarea的長度驗(yàn)證的情況下,還是會把textarea的全部內(nèi)容提交。
復(fù)制代碼 代碼如下:
<html>
<head>
<title>JQuery為textarea添加maxlength</title>
<script type="text/javascript" src="jquery-1.4.js"></script>
</head>
<body>
<textarea style="width:300px; height:60px;" maxlength="10"></textarea>
</body>
</html>
<script type="text/javascript">
$(function(){
$("textarea[maxlength]").keyup(function(){
var area=$(this);
var max=parseInt(area.attr("maxlength"),10); //獲取maxlength的值
if(max>0){
if(area.val().length>max){ //textarea的文本長度大于maxlength
area.val(area.val().substr(0,max)); //截?cái)鄑extarea的文本重新賦值
}
}
});
});
</script>
如果只用keyup只能判斷鍵盤輸入的maxlength,利用鼠標(biāo)的粘貼還是可以超過maxlength的限制,可以利用blur事件做判斷:
復(fù)制代碼 代碼如下:
$("textarea[maxlength]").blur(function(){
var area=$(this);
var max=parseInt(area.attr("maxlength"),10); //獲取maxlength的值
if(max>0){
if(area.val().length>max){ //textarea的文本長度大于maxlength
area.val(area.val().substr(0,max)); //截?cái)鄑extarea的文本重新賦值
}
}
});
失去焦點(diǎn)后截?cái)鄑extarea的文本。
通過blur事件判斷后還是有問題,如果是粘貼后直接提交而沒有做對textarea的長度驗(yàn)證的情況下,還是會把textarea的全部內(nèi)容提交。
您可能感興趣的文章:
- jQuery中size()方法用法實(shí)例
- jquery下div 的resize事件示例代碼
- jquery得到font-size屬性值實(shí)現(xiàn)代碼
- jquery 實(shí)現(xiàn)的改變顏色與背景的代碼 change(fontsize,background)補(bǔ)充2
- Jquery change(fontsize,background) 改變顏色與背景的代碼
- jQuery對象的length屬性用法實(shí)例
- 通過length屬性判斷jquery對象是否存在
- TextArea不支持maxlength的解決辦法(jquery)
- jQuery maxlength文本字?jǐn)?shù)限制插件
- jQuery length 和 size()區(qū)別總結(jié)
相關(guān)文章
jQuery 頁面載入進(jìn)度條實(shí)現(xiàn)代碼
頁面 Loading 條基本人人都會用。它的原理很簡單:在頁頭放置一個(gè)文字或者圖片的 loading 狀態(tài),然后頁尾載入一段 JS 隱藏掉,即根據(jù)瀏覽器的載入順序來實(shí)現(xiàn)的簡易 Loading 狀態(tài)條。2009-02-02深入理解Jquery表單驗(yàn)證(使用formValidator)
表單驗(yàn)證在web中中的應(yīng)用很廣,本篇文章主要介紹了Jquery表單驗(yàn)證(使用formValidator),非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2017-01-01jquery實(shí)現(xiàn)省市select下拉框的替換(示例代碼)
本篇文章主要是對jquery實(shí)現(xiàn)省市select下拉框的替換(示例代碼)進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02jQuery針對input的class屬性寫了多個(gè)值情況下的選擇方法
這篇文章主要介紹了jQuery針對input的class屬性寫了多個(gè)值情況下的選擇方法,結(jié)合實(shí)例形式對比分析了jQuery選擇器針對class屬性中有多個(gè)值情況下的選中方法,需要的朋友可以參考下2016-06-06jQuery實(shí)現(xiàn)拼圖小游戲(實(shí)例講解)
下面小編就為大家?guī)硪黄猨Query實(shí)現(xiàn)拼圖小游戲(實(shí)例講解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07jQuery自定義動(dòng)畫函數(shù)實(shí)例詳解(附demo源碼)
這篇文章主要介紹了jQuery自定義動(dòng)畫函數(shù)實(shí)現(xiàn)方法,形式實(shí)例分析了jQuery通過插件結(jié)合數(shù)學(xué)運(yùn)算實(shí)現(xiàn)滑塊動(dòng)畫運(yùn)動(dòng)的效果,并附完整demo源碼供讀者下載,需要的朋友可以參考下2015-12-12jQuery實(shí)現(xiàn)中獎(jiǎng)播報(bào)功能(讓文本滾動(dòng)起來) 簡單設(shè)置數(shù)值即可
這篇文章主要介紹了jQuery實(shí)現(xiàn)中獎(jiǎng)播報(bào)功能(讓文本滾動(dòng)起來) 簡單設(shè)置數(shù)值即可,文中通過實(shí)例代碼給大家詳細(xì)介紹,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03