如何在chrome，IE 8和9中使用jquery處理剪貼板數據？

Question

這是我用來截斷粘貼文本的jquery代碼，因此它不超過元素的最大長度。 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

你可以做這樣的事情，請注意，這是在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); 
    } 
}); 

Answer 2

你把太多精力到的東西，顯然是一個瀏覽器怪癖和大多是無法控制的，並可能在未來改變。事實上，我無法在IE10中重新創建它 - 它對我來說就像Chrome一樣。

請確保您在服務器端驗證長度，因爲在將表單輸入提交給服務器時仍有可能避開字段的最大長度（請參閱this somewhat similar question）。這並不是說你不應該有一些客戶端邏輯來驗證輸入的長度來強制執行最大長度約束 - 我只是認爲你不需要去嘗試在這裏嘗試基本攔截一個粘貼命令。保持簡單 - 在JavaScript中進行基本的長度驗證檢查將比您在這裏獲得的雜亂得多。

也許認爲這樣的位的jQuery：

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

（其中DisplayLengthError（）是觸發某種反饋，他們已經超出了字段的最大長度約束用戶的任意函數，是它是一個錯誤標籤和警告框等）