web应用程序如何检测粘贴事件并检索要粘贴的数据?
我想在文本粘贴到富文本编辑器之前删除HTML内容。
在粘贴后清理文本是有效的，但问题是所有以前的格式都会丢失。例如，我可以在编辑器中编写一个句子并将其加粗，但当我粘贴新文本时，所有格式都会丢失。我只想清除粘贴的文本，并保留以前的任何格式不变。
理想情况下，解决方案应该可以跨所有现代浏览器(例如，MSIE、Gecko、Chrome和Safari)工作。
注意，MSIE有clipboardData.getData()，但我找不到其他浏览器的类似功能。
当前回答
对于清除粘贴文本和替换当前选择的文本与粘贴文本的问题是相当琐碎的:
<div id='div' contenteditable='true' onpaste='handlepaste(this, event)'>Paste</div>
JS:
function handlepaste(el, e) {
document.execCommand('insertText', false, e.clipboardData.getData('text/plain'));
e.preventDefault();
}
其他回答
解决方案，为我是添加事件监听器粘贴事件，如果你是粘贴到一个文本输入。 由于粘贴事件发生在输入中的文本更改之前，在我的on粘贴处理程序中，我创建了一个延迟函数，其中我检查输入框中发生的粘贴更改:
onPaste: function() {
var oThis = this;
setTimeout(function() { // Defer until onPaste() is done
console.log('paste', oThis.input.value);
// Manipulate pasted input
}, 1);
}
你可以这样做:
使用这个jQuery插件的前后粘贴事件:
$.fn.pasteEvents = function( delay ) {
if (delay == undefined) delay = 20;
return $(this).each(function() {
var $el = $(this);
$el.on("paste", function() {
$el.trigger("prepaste");
setTimeout(function() { $el.trigger("postpaste"); }, delay);
});
});
};
现在你可以使用这个插件;:
$('#txt').on("prepaste", function() {
$(this).find("*").each(function(){
var tmp=new Date.getTime();
$(this).data("uid",tmp);
});
}).pasteEvents();
$('#txt').on("postpaste", function() {
$(this).find("*").each(function(){
if(!$(this).data("uid")){
$(this).removeClass();
$(this).removeAttr("style id");
}
});
}).pasteEvents();
解释
首先将所有现有元素的uid设置为data属性。
然后比较所有节点的POST PASTE事件。因此，通过比较，您可以识别新插入的元素，因为它们将有uid，然后只需从新创建的元素中删除style/class/id属性，以便您可以保留旧的格式。
我写了一个小的概念证明蒂姆唐斯提议这里与屏幕文本区域。下面是代码:
<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开发人员，所以我可能错过了一些东西(=>做你自己的测试)。
当用户通过浏览器的用户界面发起“粘贴”操作时，粘贴事件将被触发。
HTML
<div class="source" contenteditable="true">Try copying text from this box...</div>
<div class="target" contenteditable="true">...and pasting it into this one</div>
JavaScript
const target = document.querySelector('div.target');
target.addEventListener('paste', (event) => {
let paste = (event.clipboardData || window.clipboardData).getData('text');
paste = paste.toUpperCase();
const selection = window.getSelection();
if (!selection.rangeCount) return false;
selection.deleteFromDocument();
selection.getRangeAt(0).insertNode(document.createTextNode(paste));
event.preventDefault();
});
知道更多
现场演示
在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>
