如何在chrome中使用jquery操作剪贴板数据,IE 8&9

How to manipulate clipboard data using jquery in chrome, IE 8&9?

本文关键字:IE 数据 amp 剪贴板 操作 chrome jquery      更新时间:2023-10-13

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

<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>

你可以做这样的事情,请注意,这是在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);
    }
});

您在某些显然是浏览器怪癖的事情上投入了太多精力,这些事情大多超出了您的控制范围,并且可能在未来发生变化。事实上,我无法在IE10中重新创建它——它的行为对我来说就像Chrome

确保在服务器端验证长度,因为在向服务器提交表单输入时,仍然可以绕过字段的最大长度(请参阅这个有点类似的问题)。这并不是说你不应该有一些客户端逻辑来验证输入的长度,以强制执行maxlength约束——我只是认为你不需要达到你在这里试图截取粘贴命令的长度。保持简单——在JavaScript中进行基本的长度验证检查会比这里的混乱得多。

也许可以考虑像这样的jQuery:

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

(其中DisplayLengthError()是一个任意函数,它会向用户触发某种反馈,即用户已经超过了字段的最大长度限制,无论是错误标签还是警告框等)