2017-04-16 45 views
1

我跟着這個問題JavaScript get clipboard data on paste event (Cross browser)從剪貼板獲取粘貼的數據,但我用jQuery替代。現在我得到了數據,我刪除了所有的html標籤。但我不知道如何粘貼它。 elementcontenteditable div如何修改粘貼的數據? Jquery

element.on('paste', function (e) { 
    var clipboardData, pastedData; 
    e.preventDefault(); 
    // Get pasted data via clipboard API 
    clipboardData = e.clipboardData || window.clipboardData || e.originalEvent.clipboardData; 
    pastedData = clipboardData.getData('Text').replace(/<[^>]*>/g, ""); 
    // How to paste pasteddata now? 
    console.log(pastedData); 
}); 
+0

如何將數據粘貼在那裏,到輸入? – 2017-04-16 15:20:09

+0

裏面有一個contenteditable div – TSR

+0

有你的樣子;隨機在它 –

回答

-3

嗯,這取決於什麼元素,你打算在粘貼。你可以使用jQuery或本地JavaScript實現的!

也許就像 $(targetNode).append(pastedData)document.getElementById('targetNode').innerText = pastedData

+0

粘貼可能會在現有內容中發生......這會清除該內容的其他部分或將粘貼的內容放置在用戶不期待的末尾 – charlietfl

1

我找到了答案,我會分享。爲了淨化從html標籤剪貼板,你應該粘貼此:

   element.on('paste', function (e) { 
        e.preventDefault(); 
        var text; 
        var clp = (e.originalEvent || e).clipboardData; 
        if (clp === undefined || clp === null) { 
         text = window.clipboardData.getData("text") || ""; 
         if (text !== "") { 
          text = text.replace(/<[^>]*>/g, ""); 
          if (window.getSelection) { 
           var newNode = document.createElement("span"); 
           newNode.innerHTML = text; 
           window.getSelection().getRangeAt(0).insertNode(newNode); 
          } else { 
           document.selection.createRange().pasteHTML(text); 
          } 
         } 
        } else { 
         text = clp.getData('text/plain') || ""; 
         if (text !== "") { 
          text = text.replace(/<[^>]*>/g, ""); 
          document.execCommand('insertText', false, text); 
         } 
        } 
       }); 

信用:l2aelba

2

可能會更容易讓粘貼後立即着手和更新的元素。將取決於使用的情況下也可以作爲光標位置可能會丟失這樣

$(':input').on('paste', function (e) { 
 
    var $el = $(this); 
 
    setTimeout(function() { 
 
     $el.val(function(){ 
 
      return this.value.replace(/foo/g, "bar"); 
 
     }) 
 
    }); 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>foo was here</p> 
 
<textarea></textarea>