JQuery為textarea添加maxlength屬性的代碼
更新時間：2010年04月07日 13:55:50 作者：
textarea默認不支持maxlength屬性。所以通過jquery實現(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)); //截斷textarea的文本重新賦值
}
}
});
});
</script>
如果只用keyup只能判斷鍵盤輸入的maxlength，利用鼠標的粘貼還是可以超過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)); //截斷textarea的文本重新賦值
}
}
});
失去焦點后截斷textarea的文本。
通過blur事件判斷后還是有問題，如果是粘貼后直接提交而沒有做對textarea的長度驗證的情況下，還是會把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)); //截斷textarea的文本重新賦值
}
}
});
});
</script>
如果只用keyup只能判斷鍵盤輸入的maxlength，利用鼠標的粘貼還是可以超過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)); //截斷textarea的文本重新賦值
}
}
});
失去焦點后截斷textarea的文本。
通過blur事件判斷后還是有問題，如果是粘貼后直接提交而沒有做對textarea的長度驗證的情況下，還是會把textarea的全部內(nèi)容提交。
您可能感興趣的文章:
- jQuery中size()方法用法實例
- jquery下div 的resize事件示例代碼
- jquery得到font-size屬性值實現(xiàn)代碼
- jquery 實現(xiàn)的改變顏色與背景的代碼 change(fontsize,background)補充2
- Jquery change(fontsize,background) 改變顏色與背景的代碼
- jQuery對象的length屬性用法實例
- 通過length屬性判斷jquery對象是否存在
- TextArea不支持maxlength的解決辦法(jquery)
- jQuery maxlength文本字數(shù)限制插件
- jQuery length 和 size()區(qū)別總結(jié)
相關(guān)文章
這篇文章主要介紹了jQuery實現(xiàn)簡單的DIV拖動效果,涉及jQuery針對鼠標事件的響應(yīng)及頁面元素的動態(tài)操作技巧,需要的朋友可以參考下2016-02-02
這邊文章主要給大家介紹了jQuery原型屬性constructor,selector,length,jquery和原型方法size,get,toArray，十分的詳細，有需要的小伙伴可以參考下。2015-07-07
jQuery javaScript捕獲回車事件(示例代碼)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
jQuery和hwSlider實現(xiàn)內(nèi)容響應(yīng)式可觸控滑動切換效果附源碼下載（二）
這篇文章主要介紹了jQuery和hwSlider實現(xiàn)內(nèi)容響應(yīng)式可觸控滑動切換效果附源碼下載（二）的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了詳解jQuery中的元素的屬性和相關(guān)操作,jQuery是最為流行的JavaScript庫,需要的朋友可以參考下2015-08-08
jquery快捷動態(tài)綁定鍵盤事件的操作函數(shù)代碼
動態(tài)綁定鍵盤事件的方法或許會有很多，在本文將為大家介紹下jquery是如何快捷實現(xiàn)的，感興趣的朋友不要錯過2013-10-10
jquery text,radio,checkbox,select操作實現(xiàn)代碼
學習jquery的朋友看參考下，對form等文本框的一些控制實現(xiàn)代碼。2009-07-07
客戶端用一個html頁面調(diào)用一個ashx文件（一般http處理程序），返回 json格式的自定義對象2010-04-04
each()函數(shù)是基本上所有的框架都提供了的一個工具類函數(shù)，通過它，你可以遍歷對象、數(shù)組的屬性值并進行處理。2010-03-03
jquery怎樣實現(xiàn)ajax聯(lián)動框(二)
ajax聯(lián)動框想必大家早有所耳聞，接下來將介紹jquery實現(xiàn)另一種形式的聯(lián)動框，右邊的聯(lián)動框用jquery生成，仿照上篇的js方法修改的，感興趣的你可以參考下希望可以幫助到你2013-03-03