web应用程序如何检测粘贴事件并检索要粘贴的数据?
我想在文本粘贴到富文本编辑器之前删除HTML内容。
在粘贴后清理文本是有效的，但问题是所有以前的格式都会丢失。例如，我可以在编辑器中编写一个句子并将其加粗，但当我粘贴新文本时，所有格式都会丢失。我只想清除粘贴的文本，并保留以前的任何格式不变。
理想情况下，解决方案应该可以跨所有现代浏览器(例如，MSIE、Gecko、Chrome和Safari)工作。
注意，MSIE有clipboardData.getData()，但我找不到其他浏览器的类似功能。
当前回答
这是上面发布的一个现有代码，但我已经为IE更新了它，错误是当现有的文本被选择和粘贴时，不会删除所选的内容。下面的代码已经修复了这个问题
selRange.deleteContents();
参见下面的完整代码
$('[contenteditable]').on('paste', function (e) {
e.preventDefault();
if (window.clipboardData) {
content = window.clipboardData.getData('Text');
if (window.getSelection) {
var selObj = window.getSelection();
var selRange = selObj.getRangeAt(0);
selRange.deleteContents();
selRange.insertNode(document.createTextNode(content));
}
} else if (e.originalEvent.clipboardData) {
content = (e.originalEvent || e).clipboardData.getData('text/plain');
document.execCommand('insertText', false, content);
}
});
其他回答
这招对我很管用:
function onPasteMe(currentData, maxLen) {
// validate max length of pasted text
var totalCharacterCount = window.clipboardData.getData('Text').length;
}
<input type="text" onPaste="return onPasteMe(this, 50);" />
简单的版本:
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条带标签)
这对于Nico的回答来说太长了，我认为它在Firefox上已经不起作用了(根据评论)，在Safari上也不起作用了。
首先，您现在似乎可以直接从剪贴板读取。而不是像这样的代码:
if (/text\/plain/.test(e.clipboardData.types)) {
// shouldn't this be writing to elem.value for text/plain anyway?
elem.innerHTML = e.clipboardData.getData('text/plain');
}
use:
types = e.clipboardData.types;
if (((types instanceof DOMStringList) && types.contains("text/plain")) ||
(/text\/plain/.test(types))) {
// shouldn't this be writing to elem.value for text/plain anyway?
elem.innerHTML = e.clipboardData.getData('text/plain');
}
因为Firefox有一个类型字段，它是一个DOMStringList，它不实现测试。
Next Firefox将不允许粘贴，除非焦点位于contentteditable =true字段中。
最后，Firefox将不允许可靠地粘贴，除非焦点在文本区域(或者可能是输入)，这不仅是contenteditable=true，而且:
不显示:没有 隐藏不可见性: 不是零大小
I was trying to hide the text field so I could make paste work over a JS VNC emulator (i.e. it was going to a remote client and there was no actually textarea etc to paste into). I found trying to hide the text field in the above gave symptoms where it worked sometimes, but typically failed on the second paste (or when the field was cleared to prevent pasting the same data twice) as the field lost focus and would not properly regain it despite focus(). The solution I came up with was to put it at z-order: -1000, make it display:none, make it as 1px by 1px, and set all the colours to transparent. Yuck.
在Safari上，你应用上面的第二部分，即你需要有一个不显示的文本区域:none。
只需让浏览器像往常一样在其内容可编辑的div中粘贴，然后在粘贴后将用于自定义文本样式的任何span元素与文本本身交换。这似乎工作得很好，在internet explorer和其他浏览器我尝试…
$('[contenteditable]').on('paste', function (e) {
setTimeout(function () {
$(e.target).children('span').each(function () {
$(this).replaceWith($(this).text());
});
}, 0);
});
这个解决方案假设您正在运行jQuery，并且您不希望在任何内容可编辑div中设置文本格式。
好处是它超级简单。
我写了一个小的概念证明蒂姆唐斯提议这里与屏幕文本区域。下面是代码:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script language="JavaScript">
$(document).ready(function()
{
var ctrlDown = false;
var ctrlKey = 17, vKey = 86, cKey = 67;
$(document).keydown(function(e)
{
if (e.keyCode == ctrlKey) ctrlDown = true;
}).keyup(function(e)
{
if (e.keyCode == ctrlKey) ctrlDown = false;
});
$(".capture-paste").keydown(function(e)
{
if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey)){
$("#area").css("display","block");
$("#area").focus();
}
});
$(".capture-paste").keyup(function(e)
{
if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey)){
$("#area").blur();
//do your sanitation check or whatever stuff here
$("#paste-output").text($("#area").val());
$("#area").val("");
$("#area").css("display","none");
}
});
});
</script>
</head>
<body class="capture-paste">
<div id="paste-output"></div>
<div>
<textarea id="area" style="display: none; position: absolute; left: -99em;"></textarea>
</div>
</body>
</html>
只需复制并粘贴整个代码到一个html文件，并尝试粘贴(使用ctrl-v)文本从剪贴板的任何地方的文档。
我在IE9和新版本的Firefox、Chrome和Opera中测试了它。工作得很好。另外，用户可以使用任何他喜欢的组合键来触发这个功能。当然，不要忘记包含jQuery源代码。
请随意使用此代码，如果您有一些改进或问题，请将它们发布回来。还要注意，我不是Javascript开发人员，所以我可能错过了一些东西(=>做你自己的测试)。
