JavaScript实现textarea的maxlength

ianylb

浏览: 73544 次
性别:
来自: 厦门

最近访客更多访客>>

uid81

dragoonfeng

tank924

jacky_X

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML
JavaScript

这个脚本模拟实现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>

textarea_maxlength.rar (3.3 KB)
下载次数: 27

分享到：

全角与半角转换 | Servlet的Redirect与Forward的区别

2011-08-06 22:12
浏览 3779
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论