JavaScript实现textarea的maxlength

最新推荐文章于 2021-10-21 14:43:41 发布

yelb_ianylb

最新推荐文章于 2021-10-21 14:43:41 发布

阅读量229

点赞数

分类专栏： HTML JavaScript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/yelb_ianylb/article/details/83982134

版权

JavaScript 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

[size=medium]这个脚本模拟实现textarea的maxlength，无闪限制输入固定长度的字符串
目前只支持IE（ff,chrome中textarea的maxlength效果与input中的maxlength一样）
在之后会想办法做到兼容长用的浏览器[/size]

[size=large]JavaScript脚本如下：[/size]
/*--------------------------------------------------|
| 文件中的对象名 | 文件路径 |
|---------------------------------------------------|
| 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
};
}
[size=large]
对JavaScript脚本做如下测试：[/size]
<!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>