2017-04-16 42 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>