的JavaScript抓粘貼事件中的textarea

Question

目前，我有我需要的控制權已被粘貼的文本中的文本區域，

基本上我需要能夠採取任何用戶想要粘貼到一個文本，並把它變成一個變量。

我會然後制定出其所粘貼的文字和字符串從文本區域中刪除它的大小位置，

在最後處理文字多數民衆贊成

然後就是在變量在我自己辦法。

我的問題：我將如何去獲取剛剛被用戶粘貼的變量中的文本副本？

謝謝。

Answer 1

我前幾天回答過類似的問題：Detect pasted text with ctrl+v or right click -> paste。這次我包含了一個很長的函數，可以在IE中的textarea中精確地獲得選擇邊界;其餘的都比較簡單。

您可以使用粘貼事件來檢測大多數瀏覽器中的粘貼（儘管不是Firefox 2）。當您處理粘貼事件時，記錄當前選擇，然後設置一個簡短的計時器，該粘貼完成後調用一個函數。然後該功能可以比較長度以知道在哪裏查找粘貼的內容。像下面這樣：

function getSelectionBoundary(el, start) { 
    var property = start ? "selectionStart" : "selectionEnd"; 
    var originalValue, textInputRange, precedingRange, pos, bookmark, isAtEnd; 

    if (typeof el[property] == "number") { 
     return el[property]; 
    } else if (document.selection && document.selection.createRange) { 
     el.focus(); 

     var range = document.selection.createRange(); 
     if (range) { 
      // Collapse the selected range if the selection is not a caret 
      if (document.selection.type == "Text") { 
       range.collapse(!!start); 
      } 

      originalValue = el.value; 
      textInputRange = el.createTextRange(); 
      precedingRange = el.createTextRange(); 
      pos = 0; 

      bookmark = range.getBookmark(); 
      textInputRange.moveToBookmark(bookmark); 

      if (/[\r\n]/.test(originalValue)) { 
       // Trickier case where input value contains line breaks 

       // Test whether the selection range is at the end of the 
       // text input by moving it on by one character and 
       // checking if it's still within the text input. 
       try { 
        range.move("character", 1); 
        isAtEnd = (range.parentElement() != el); 
       } catch (ex) { 
        log.warn("Error moving range", ex); 
        isAtEnd = true; 
       } 
       range.moveToBookmark(bookmark); 

       if (isAtEnd) { 
        pos = originalValue.length; 
       } else { 
        // Insert a character in the text input range and use 
        // that as a marker 
        textInputRange.text = " "; 
        precedingRange.setEndPoint("EndToStart", textInputRange); 
        pos = precedingRange.text.length - 1; 

        // Delete the inserted character 
        textInputRange.moveStart("character", -1); 
        textInputRange.text = ""; 
       } 
      } else { 
       // Easier case where input value contains no line breaks 
       precedingRange.setEndPoint("EndToStart", textInputRange); 
       pos = precedingRange.text.length; 
      } 
      return pos; 
     } 
    } 
    return 0; 
} 

function getTextAreaSelection(textarea) { 
    var start = getSelectionBoundary(textarea, true), 
     end = getSelectionBoundary(textarea, false); 

    return { 
     start: start, 
     end: end, 
     length: end - start, 
     text: textarea.value.slice(start, end) 
    }; 
} 

function detectPaste(textarea, callback) { 
    textarea.onpaste = function() { 
     var sel = getTextAreaSelection(textarea); 
     var initialLength = textarea.value.length; 
     window.setTimeout(function() { 
      var val = textarea.value; 
      var pastedTextLength = val.length - (initialLength - sel.length); 
      var end = sel.start + pastedTextLength; 
      callback({ 
       start: sel.start, 
       end: end, 
       length: pastedTextLength, 
       text: val.slice(sel.start, end), 
       replacedText: sel.text 
      }); 
     }, 1); 
    }; 
} 

window.onload = function() { 
    var textarea = document.getElementById("your_textarea"); 
    detectPaste(textarea, function(pasteInfo) { 
     var val = textarea.value; 

     // Delete the pasted text and restore any previously selected text 
     textarea.value = val.slice(0, pasteInfo.start) + 
      pasteInfo.replacedText + val.slice(pasteInfo.end); 

     alert(pasteInfo.text); 
    }); 
}; 

Answer 2

快速搜索顯示出不同的瀏覽器有不同的方法。我不確定jQuery是否有解決方案。 Prototype.js似乎沒有一個。也許YUI可以爲你做這個？

您也可以使用TinyMCE，因爲它確實有很多不同的事件觸發器。它是一個完整的文字處理器，但是如果你願意的話，你可以用它作爲純文本。儘管添加它可能有點過分。例如，啓動後，它將您的<textarea>變成帶有幾個子的iFrame。但它會做你所要求的。

--Dave

Answer 3

您現在可以使用FilteredPaste.js（http://willemmulder.github.com/FilteredPaste.js/）來代替。它可以讓你控制粘貼到textarea或contenteditable的內容，你可以隨意過濾/更改/提取內容。