Question

这是我用来截断粘贴文本的jquery代码，因此它不会超过元素的maxlength。 Chrome上的默认行为是自动检查，但在IE 8和9中，它会粘贴整个文本，而不会检查元素的maxLength。请帮我这样做。这是我第一次在这里提问，所以如果我需要提供更多细节，请告诉我。感谢。

<script type="text/javascript">
//var lenGlobal;
var maxLength;
function doKeypress(control) {
            maxLength = control.attributes["maxLength"].value;
            value = control.value;
            if (maxLength && value.length > maxLength - 1) {
                event.returnValue = false;
                maxLength = parseInt(maxLength);
            }
        }

//function doBeforePaste(control) {
            //maxLength = control.attributes["maxLength"].value;
            //if (maxLength) {
               // event.returnValue = false;
                //var v = control.value;
                //lenGlobal = v.length;
           // }
       // }     

  $(document).on("focus","input[type=text],textarea",function(e){

    var t = e.target;
    maxLength = parseInt($(this).attr('maxLength'));
    if(!$(t).data("EventListenerSet")){
        //get length of field before paste
        var keyup = function(){
            $(this).data("lastLength",$(this).val().length);
        };
        $(t).data("lastLength", $(t).val().length);
        //catch paste event
        var paste = function(){
            $(this).data("paste",1);//Opera 11.11+  
        };
        //process modified data, if paste occured
        var func = function(){
            if($(this).data("paste")){
                var dat = this.value.substr($(this).data("lastLength"));
                //alert(this.value.substr($(this).data("lastLength")));
               // alert(dat.substr(0,4));
                $(this).data("paste",0);
                //this.value = this.value.substr(0,$(this).data("lastLength"));
                $(t).data("lastLength", $(t).val().length); 
            if (dat == ""){
                this.value = $(t).val();
                }
                else
                {
                this.value = dat.substr(0,maxLength);
                }
            }
        };

        if(window.addEventListener) {
        t.addEventListener('keyup', keyup, false);
        t.addEventListener('paste', paste, false);
        t.addEventListener('input', func, false);    
        } else{//IE
        t.attachEvent('onkeyup', function() {keyup.call(t);});
        t.attachEvent('onpaste', function() {paste.call(t);});
        t.attachEvent('onpropertychange', function() {func.call(t);});  
        }
        $(t).data("EventListenerSet",1);
    }
});
</script>

Answer 1

你正在付出过多的努力，这显然是一个浏览器的怪癖，而且大部分都是你无法控制的，并且可能会在未来发生变化。事实上，我无法在IE10中重新创建它 - 它的行为就像Chrome一样。

确保您正在验证服务器端的长度，因为在将表单输入提交到服务器时仍然可以绕过字段的maxlength（请参阅this somewhat similar question）。这并不是说你不应该有一些客户端逻辑来验证输入的长度来强制执行maxlength约束 - 我只是认为你不需要达到你在这里尝试基本上拦截粘贴命令的长度。保持简单 - 在JavaScript中进行基本长度验证检查将比您在此处的内容更加混乱。

或许可以考虑一下这样的jQuery：

$("#myTextControl").change(function() {
    if ($(this).val().length > $(this).attr('maxlength')) {
        DisplayLengthError();
    }
});

（其中DisplayLengthError（）是一个任意函数，它向用户触发某种反馈，表明它们已超出字段的maxlength约束，无论是错误标签还是警告框等。）

Answer 2

你可以做这样的事情，请注意，这是在YUI中完成的，但是可以为jquery做一些类似的事情。您需要做的就是获取输入的注释的长度，然后将文本截断为所需的长度，在本例中为2000个字符。

comment_text_box.on('valuechange', function(e) {
    //Get the comment the user input
    var comment_text = e.currentTarget.get('value');

    //Get the comment length
    var comment_length = comment_text.length;

    if(comment_length > 2000){
        alert('The comment entered is ' + comment_length + ' characters long and will be truncated to 2000 characters.');

        //Truncate the comment
        var new_comment = comment_text.substring(0, 2000);

        //Set the value of the textarea to truncated comment
        e.currentTarget.set('value', new_comment);
    }
});

如何使用chrome，IE 8和9中的jquery操作剪贴板数据？

2 个答案: