TextArea 控件的最大长度问题(js json)

更新时间：2009年12月16日 18:56:15 作者：

javascript json实现textarea最大长度的控制实现代码，需要的朋友可以测试下。代码写的很漂亮。

如果只是单纯地想限制 textarea 中的字数，不想写太多的话，可用：

<textarea onkeyup="this.value = this.value.slice(0, 80)"></textarea>

或

<textarea onkeyup="this.value = this.value.substring(0, 80)"></textarea>

在 textarea 的 onkeyup 中检查字数之方法：

复制代码代码如下:

 
<script language="javascript" type="text/javascript"> 
function DjCheckMaxlength(oInObj) 
{ 
var iMaxLen = parseInt(oInObj.getAttribute('maxlength')); 
var iCurLen = oInObj.value.length; 

if ( oInObj.getAttribute && iCurLen > iMaxLen ) 
{ 
oInObj.value = oInObj.value.substring(0, iMaxLen); 
} 
} //@ END OF DjCheckMaxlength() 
</script> 
<textarea maxlength="80" onkeyup="return DjCheckMaxlength(this);"></textarea> 

o 设定好自动去检查所有的 textarea 之方法：

复制代码代码如下:

 
<head> 
<script language="javascript" type="text/javascript"> 
function DjTextArea_AddMaxlengthAttr() 
{ 
var aX = document.getElementsByTagName('textarea'); 

for ( var iI = 0; aX.length > iI; iI++ ) 
{ 
if ( aX[iI].getAttribute('maxlength') ) 
{ 
aX[iI].onkeyup = aX[iI].onchange = DjTextArea_CheckMaxlength; 
} 
} 
} //@ END OF DjTextArea_AddMaxlengthAttr() 

function DjTextArea_CheckMaxlength() 
{ 
var iMaxLen = parseInt(this.getAttribute('maxlength')); 
var iCurLen = this.value.length; 

if ( this.getAttribute && iCurLen > iMaxLen ) 
{ 
this.value = this.value.substring(0, iMaxLen); 
} 
} //@ END OF DjTextArea_CheckMaxlength() 
</script> 
</head> 

<body onload="DjTextArea_AddMaxlengthAttr();"> 

复制代码代码如下:

var Inputs = { 

OnIntegerOnly: function() { 
var k = System.isIE ? event.keyCode : event.which; 

if(event.ctrlKey || event.ctrlAlt || event.shiftKey) { 
Inputs.DisableInput(event); 
return; 
} 

if ( ( k < 48 || k > 57 ) 
&& 8 != k 
&& 9 != k 
&& 46 != k 
&& 37 != k 
&& 39 != k 
&& 16 != k 
&& 36 != k 
&& 35 != k 
&& 17 != k 
&& 13 != k 
&& ( k < 96 || k > 105 ) 
) { 
Inputs.DisableInput(event); 
} 

return k; 
}, 

OnDecimalOnly: function() { 
var k = System.isIE ? event.keyCode : event.which; 

if(event.ctrlKey || event.ctrlAlt || event.shiftKey) { 
Inputs.DisableInput(event); 
return; 
} 

if( ( k < 48 || k > 57 ) 
&& 8 != k 
&& 9 != k 
&& 46 != k 
&& 37 != k 
&& 39 != k 
&& 16 != k 
&& 36 != k 
&& 35 != k 
&& 17 != k 
&& 13 != k 
&& 190 != k 
&& 110 != k 
&& ( k < 96 || k > 105 ) 
) { 
Inputs.DisableInput(event); 
} 

return k; 
}, 

OnAsciiOnly: function() { 
var k = System.isIE ? event.keyCode : event.which; 

if ( ( k < 97 || k > 122 ) 
&& ( k < 65 || k > 90 ) 
&& ( k < 48 || k > 57 ) 
&& 8 != k 
&& 9 != k 
&& 46 != k 
&& 37 != k 
&& 39 != k 
&& 16 != k 
&& 36 != k 
&& 35 != k 
&& 17 != k 
&& 13 != k 
&& 189 != k 
&& 187 != k 
) { 
Inputs.DisableInput(event); 
} 

return k; 
}, 

DisableInput: function(event) { 
if(System.isIE) 
event.returnValue = false; 
else 
event.preventDefault(); 
}, 

AddOnPos: function(obj, charvalue) { 
//obj代表要插入字符的输入框 

//value代表要插入的字符 

obj.focus(); 
var r = document.selection.createRange(); 
var ctr = obj.createTextRange(); 
var i; 
var s = obj.value; 

//注释掉的这种方法只能用在单行的输入框input内 

//对多行输入框textarea无效 
//r.setEndPoint("StartToStart", ctr); 
//i = r.text.length; 
//取到光标位置----Start---- 
var ivalue = "&^asdjfls2FFFF325%$^&"; 
r.text = ivalue; 
i = obj.value.indexOf(ivalue); 
r.moveStart("character", -ivalue.length); 
r.text = ""; 
//取到光标位置----End---- 
//插入字符 
obj.value = s.substr(0,i) + charvalue + s.substr(i,s.length); 
ctr.collapse(true); 
ctr.moveStart("character", i + charvalue.length); 
ctr.select(); 
}, 

MaxLength: function() { 
var _this = event.srcElement; 
var iMaxLen = parseInt(_this.getAttribute('maxlength')); 

switch(event.type) { 
case 'beforepaste': { 
event.returnValue = false; 
} break; 

case 'paste': { 
var iTxtLen = _this.value.lenUTF8(); 
var txtCbd = window.clipboardData.getData("Text"); 
var iCbdLen = txtCbd.lenUTF8(); 
if((iMaxLen - iTxtLen) <= iCbdLen) { 
var iSurplusLen = iMaxLen - iTxtLen; 
var subStr = txtCbd.substr(0, iSurplusLen); 
var insertStr = ''; 
for(var i = 0; i < subStr.length; i++) { 
var chr = subStr.substr(i, 1); 
if(iSurplusLen >= chr.lenUTF8()) { 
insertStr += chr; 
iSurplusLen -= chr.lenUTF8(); 
} 
} 

Inputs.AddOnPos(_this, insertStr); 
//_this.style.backgroundColor = 'red'; 
//System.setTimeout(Inputs.ColorTips, 500, _this); 
event.returnValue = false; 
event.srcElement.style.imeMode = 'disabled'; 
} else { 
event.returnValue = true; 
event.srcElement.style.imeMode = 'auto'; 
} 
} break; 

case 'keypress': { 
var iTxtLen = _this.value.lenUTF8(); 
if(iMaxLen <= iTxtLen) { 
while(_this.value.lenUTF8() > iMaxLen) { 
_this.value = _this.value.substr(0, _this.value.length - 1); 
} 
Inputs.DisableInput(event); 
if('disabled' != event.srcElement.style.imeMode) { 
event.srcElement.style.imeMode = 'disabled'; 
} 
} 
else { 
if('auto' != event.srcElement.style.imeMode) { 
event.srcElement.style.imeMode = 'auto'; 
} 
} 
} break; 

case 'keyup': { 
var k = System.isIE ? event.keyCode : event.which; 

if (8 != k 
&& 9 != k 
&& 46 != k 
&& 37 != k 
&& 39 != k 
&& 16 != k 
&& 36 != k 
&& 35 != k 
&& 17 != k 
&& 13 != k 
&& 189 != k 
&& 187 != k 
) { 
if(_this.getAttribute) { 
_this.fireEvent('onkeypress'); 
} 
} 
} break; 

case 'keydown': { 
var k = System.isIE ? event.keyCode : event.which; 

if (8 != k 
&& 9 != k 
&& 46 != k 
&& 37 != k 
&& 39 != k 
&& 16 != k 
&& 36 != k 
&& 35 != k 
&& 17 != k 
&& 13 != k 
&& 189 != k 
&& 187 != k 
) { 
var iTxtLen = _this.value.lenUTF8(); 
if(iMaxLen <= iTxtLen) { 
Inputs.DisableInput(event); 
} 
} 
} break; 
} 
}, 

TextAreaMaxLength: function() { 

var aX = document.getElementsByTagName('textarea'); 
for(var i = 0; i < aX.length; i++) { 
if(aX[i].getAttribute('maxlength')) { 
aX[i].detachEvent('onbeforepaste', Inputs.MaxLength); 
aX[i].detachEvent('onpaste', Inputs.MaxLength); 
aX[i].detachEvent('onkeypress', Inputs.MaxLength); 
aX[i].detachEvent('onkeyup', Inputs.MaxLength); 
aX[i].detachEvent('onkeydown', Inputs.MaxLength); 

aX[i].attachEvent('onbeforepaste', Inputs.MaxLength); 
aX[i].attachEvent('onpaste', Inputs.MaxLength); 
aX[i].attachEvent('onkeypress', Inputs.MaxLength); 
aX[i].attachEvent('onkeyup', Inputs.MaxLength); 
aX[i].attachEvent('onkeydown', Inputs.MaxLength); 
/* 
var res = 'zh-cn' == window.navigator.systemLanguage 
? '最大长度：' 
: 'Maximum length for: '; 

if('' == aX[i].title) aX[i].title = res + aX[i].getAttribute('maxlength'); 
*/ 
} 
} 
}, 

TextBoxMaxLength: function() { 
var aX = document.getElementsByTagName('input'); 
for(var i = 0; i < aX.length; i++) { 
var maxLen = aX[i].getAttribute('maxlength'); 
if('text' == aX[i].type 
&& null != maxLen 
&& '' != maxLen 
&& undefined != maxLen 
&& 2147483647 > parseInt(maxLen) 
&& '' == aX[i].title) { 

aX[i].detachEvent('onbeforepaste', Inputs.MaxLength); 
aX[i].detachEvent('onpaste', Inputs.MaxLength); 
aX[i].detachEvent('onkeypress', Inputs.MaxLength); 
aX[i].detachEvent('onkeyup', Inputs.MaxLength); 

aX[i].attachEvent('onbeforepaste', Inputs.MaxLength); 
aX[i].attachEvent('onpaste', Inputs.MaxLength); 
aX[i].attachEvent('onkeypress', Inputs.MaxLength); 
aX[i].attachEvent('onkeyup', Inputs.MaxLength); 
/* 
var res = 'zh-cn' == window.navigator.systemLanguage 
? '最大长度：' 
: 'Maximum length for: '; 

aX[i].title = res + aX[i].getAttribute('maxlength'); 
*/ 
} 
} 
} 
} 

Tools.Inputs = Inputs; 

window.attachEvent('onload', Tools.Inputs.TextAreaMaxLength); 
window.attachEvent('onload', Tools.Inputs.TextBoxMaxLength);

您可能感兴趣的文章:

为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)，需要的朋友可以参考下。
2010-11-11
如何识别上传前检测的图像是有效的方法
如何识别上传前检测的图像是有效的方法...
2007-02-02
让广告代码不再影响你的网页加载速度
让广告代码不再影响你的网页加载速度...
2006-07-07
IE不支持option的display样式，只能使用remove和add
想实现一个很简单的功能：当选中“中介”时，不显示“求购”与“求租”。本以为通过display:none即可实现，结果发现在option元素上使用display:none在firefox中有效，在IE6、IE7、IE8中都无效。
2009-12-12
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码...
2007-04-04
默认让页面的第一个控件选中的javascript代码
当页面上面显示了一个表单后，通常焦点并不是放在第一个控件上面，只需要一点通常的脚本就可以实现这个效果。
2009-12-12
JS 动态添加列表框项效果代码
动态添加列表框项，不错的效果，需要用的朋友可以参考下。
2009-07-07
Ajax在线提交留言并实时显示的js代码[修正版]
Ajax在线提交留言并显示的HTML实例，不要小看这一个页面哦，虽然代码也不多，但完成的功能并不少，它可以完成表单判断、无刷新提交留言、无刷新显示，并实现了动画显示文字的功能，觉得怎么样呢？
2010-11-11
下拉菜单
下拉菜单...
2006-07-07
javascript 复选框选择/全选后特效
javascript 复选框选择/全选后特效...
2007-07-07