这个脚本模拟实现textarea的maxlength,无闪限制输入固定长度的字符串
目前只支持IE(ff,chrome中textarea的maxlength效果与input中的maxlength一样)
在之后会想办法做到兼容长用的浏览器
JavaScript脚本如下:
/*--------------------------------------------------|
| 文件中的对象名 | 文件路径 |
|---------------------------------------------------|
| Copyright (c) 2002-2003 Geir Landr |
| Email : ianylb@sina.com、yelb@surekam.com |
| |
| This script can be used freely as long as all |
| copyright messages are intact. |
| Updated: 11.06.2011 |
| Description: 因为textarea中没有maxlength这个属性, |
| 这个脚本模拟了input中maxlength功能,限定 |
| 输入固定长度的字符串。此脚本暂时只支持IE |
|--------------------------------------------------*/
var MaxLengthCheck = function(){
/**
* 如果textarea没有maxlength属性,那么默认可输入2048个字符
*/
var textMaxLength = 2048;
/**
* 当按键按下时,可绑定这个方法
*/
this.doKeyPress = function(element, event){
var maxLength = element.getAttribute("maxLength");
maxLength = maxLength || textMaxLength;
if (maxLength !== "") {
if (element.value.length >= maxLength) {
if (window.event) {
window.event.returnValue = null;
}
else {
return false;
}
}
}
this.doOtherThing();
};
/**
* 当粘贴时,可绑定这个方法
*/
this.doPaste = function(element, event){
var maxLength = element.getAttribute("maxLength");
maxLength = maxLength || textMaxLength;
if (maxLength !== "") {
var text = window.clipboardData.getData("Text");
var subStr = text.substr(0, maxLength - element.value.length);
window.clipboardData.setData("Text", subStr);
}
this.doOtherThing();
};
/**
* 可复写这个方法,用于客户端程序员实现其它功能
*/
this.doOtherThing = function(){
// Client Programer implment this function
};
}
对JavaScript脚本做如下测试:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>MaxLengthCheck </title>
<script src="MaxLengthCheck.js"></script>
<script>
window.onload = function(){
var checkLength = new MaxLengthCheck();
//重写doOtherThing();
checkLength.doOtherThing = function(){
alert("haha");
};
//在事件上绑定方法
var element = document.getElementById("textarea");
element.onpaste = function(){
checkLength.doPaste(element, event);
};
element.onkeypress = function(){
checkLength.doKeyPress(element, event)
}
}
</script>
</head>
<body>
<textarea id="textarea">
</textarea>
</body>
</html>