web应用程序如何检测粘贴事件并检索要粘贴的数据?
我想在文本粘贴到富文本编辑器之前删除HTML内容。
在粘贴后清理文本是有效的，但问题是所有以前的格式都会丢失。例如，我可以在编辑器中编写一个句子并将其加粗，但当我粘贴新文本时，所有格式都会丢失。我只想清除粘贴的文本，并保留以前的任何格式不变。
理想情况下，解决方案应该可以跨所有现代浏览器(例如，MSIE、Gecko、Chrome和Safari)工作。
注意，MSIE有clipboardData.getData()，但我找不到其他浏览器的类似功能。
当前回答
简单的版本:
document.querySelector('[contenteditable]').addEventListener('paste', (e) => {
e.preventDefault();
const text = (e.originalEvent || e).clipboardData.getData('text/plain');
window.document.execCommand('insertText', false, text);
});
使用clipboardData
演示:http://jsbin.com/nozifexasu/edit?js,output
Edge, Firefox, Chrome, Safari, Opera测试。
机场当局:Document.execCommand()现已废弃。
注意:记住在服务器端也检查输入/输出(如PHP条带标签)
其他回答
这个解决方案是替换html标签，简单，跨浏览器;查看这个jsfiddle: http://jsfiddle.net/tomwan/cbp1u2cx/1/，核心代码:
var $plainText = $("#plainText");
var $linkOnly = $("#linkOnly");
var $html = $("#html");
$plainText.on('paste', function (e) {
window.setTimeout(function () {
$plainText.html(removeAllTags(replaceStyleAttr($plainText.html())));
}, 0);
});
$linkOnly.on('paste', function (e) {
window.setTimeout(function () {
$linkOnly.html(removeTagsExcludeA(replaceStyleAttr($linkOnly.html())));
}, 0);
});
function replaceStyleAttr (str) {
return str.replace(/(<[\w\W]*?)(style)([\w\W]*?>)/g, function (a, b, c, d) {
return b + 'style_replace' + d;
});
}
function removeTagsExcludeA (str) {
return str.replace(/<\/?((?!a)(\w+))\s*[\w\W]*?>/g, '');
}
function removeAllTags (str) {
return str.replace(/<\/?(\w+)\s*[\w\W]*?>/g, '');
}
注意:你应该在后面做一些关于XSS过滤器的工作，因为这个解决方案不能过滤像'<<>>'这样的字符串
现场演示
在Chrome / FF / IE11上测试
有一个Chrome/IE的烦恼是这些浏览器为每一行添加<div>元素。这里有一篇关于这个的文章，它可以通过设置contentteditable元素为display:inline-block来修复
选择一些突出显示的HTML并粘贴在这里:
function onPaste(e){ var content; e.preventDefault(); if( e.clipboardData ){ content = e.clipboardData.getData('text/plain'); document.execCommand('insertText', false, content); return false; } else if( window.clipboardData ){ content = window.clipboardData.getData('Text'); if (window.getSelection) window.getSelection().getRangeAt(0).insertNode( document.createTextNode(content) ); } } /////// EVENT BINDING ///////// document.querySelector('[contenteditable]').addEventListener('paste', onPaste); [contenteditable]{ /* chroem bug: https://stackoverflow.com/a/24689420/104380 */ display:inline-block; width: calc(100% - 40px); min-height:120px; margin:10px; padding:10px; border:1px dashed green; } /* mark HTML inside the "contenteditable" (Shouldn't be any OFC!)' */ [contenteditable] *{ background-color:red; } <div contenteditable></div>
为了在IE11和Chrome上都支持纯文本的复制和粘贴，我使用了以下函数。
它有两个if语句来区分IE和chome，并执行适当的代码。在第一部分中，代码从剪贴板中读取文本，在第二部分中，它将文本粘贴到光标位置，替换当前所选文本。
特别是，对于IE上的粘贴，代码获取选择范围，删除所选文本，将文本从剪贴板插入到一个新的html文本节点中，重新配置范围以在光标位置加上文本长度处插入文本节点。
代码如下:
editable.addEventListener("paste", function(e) {
e.preventDefault();
// Get text from the clipboard.
var text = '';
if (e.clipboardData || (e.originalEvent && e.originalEvent.clipboardData)) {
text = (e.originalEvent || e).clipboardData.getData('text/plain');
} else if (window.clipboardData) {
text = window.clipboardData.getData('Text');
}
// bool to indicate if the user agent is internet explorer
let isIE = /Trident/.test(navigator.userAgent);
if (document.queryCommandSupported('insertText') && !isIE) {
// Chrome etc.
document.execCommand('insertText', false, text);
} else {
// IE.
// delete content from selection.
var sel = window.getSelection();
var range = sel.getRangeAt(0);
document.execCommand("delete");
// paste plain text in a new node.
var newNode = document.createTextNode(text);
range.insertNode(newNode);
range.setStart(newNode, 0)
range.setEnd(newNode, newNode.childNodes.length);
sel.removeAllRanges;
sel.addRange(range);
}
}, false);
特别是为了在IE上粘贴许多答案的文本，我找到了这个说明文档。execCommand('paste'， false, text);这在IE11上不起作用，因为浏览器会一次又一次地调用粘贴事件。我用range对象上的函数替换了它。
另一个问题是，在IE11上，根据版本，函数文档。execCommand('insertText'， false, text);有时可用，有时不可用，所以我显式检查浏览器是否是IE，并为它执行基于范围选择的部分代码(参见其他)。
首先想到的是谷歌的闭包库的pastehandler http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/pastehandler.html
写完这篇文章后，情况发生了变化:现在Firefox在版本22中添加了支持，所有主流浏览器现在都支持在粘贴事件中访问剪贴板数据。请看Nico Burns的回答。
在过去，这在跨浏览器的方式中通常是不可能的。最理想的情况是能够通过paste事件获取粘贴的内容，这在最近的浏览器中是可能的，但在一些较老的浏览器中是不可能的(特别是Firefox < 22)。
当你需要支持旧的浏览器时，你可以做的是相当复杂的和一点hack，可以在Firefox 2+， IE 5.5+和WebKit浏览器(如Safari或Chrome)中工作。TinyMCE和CKEditor的最新版本都使用了这种技术:
Detect a ctrl-v / shift-ins event using a keypress event handler In that handler, save the current user selection, add a textarea element off-screen (say at left -1000px) to the document, turn designMode off and call focus() on the textarea, thus moving the caret and effectively redirecting the paste Set a very brief timer (say 1 millisecond) in the event handler to call another function that stores the textarea value, removes the textarea from the document, turns designMode back on, restores the user selection and pastes the text in.
请注意，这将只适用于键盘粘贴事件，而不是粘贴上下文或编辑菜单。当粘贴事件触发时，将插入符号重定向到文本区域就太晚了(至少在某些浏览器中是这样)。
在不太可能的情况下，您需要支持Firefox 2，请注意您需要将文本区域放置在父文档中，而不是在该浏览器中的所见即所得编辑器iframe的文档中。
