web应用程序如何检测粘贴事件并检索要粘贴的数据?
我想在文本粘贴到富文本编辑器之前删除HTML内容。
在粘贴后清理文本是有效的，但问题是所有以前的格式都会丢失。例如，我可以在编辑器中编写一个句子并将其加粗，但当我粘贴新文本时，所有格式都会丢失。我只想清除粘贴的文本，并保留以前的任何格式不变。
理想情况下，解决方案应该可以跨所有现代浏览器(例如，MSIE、Gecko、Chrome和Safari)工作。
注意，MSIE有clipboardData.getData()，但我找不到其他浏览器的类似功能。
当前回答
$('#dom').on('paste',function (e){
setTimeout(function(){
console.log(e.currentTarget.value);
},0);
});
其他回答
我写了一个小的概念证明蒂姆唐斯提议这里与屏幕文本区域。下面是代码:
<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开发人员，所以我可能错过了一些东西(=>做你自己的测试)。
只需让浏览器像往常一样在其内容可编辑的div中粘贴，然后在粘贴后将用于自定义文本样式的任何span元素与文本本身交换。这似乎工作得很好，在internet explorer和其他浏览器我尝试…
$('[contenteditable]').on('paste', function (e) {
setTimeout(function () {
$(e.target).children('span').each(function () {
$(this).replaceWith($(this).text());
});
}, 0);
});
这个解决方案假设您正在运行jQuery，并且您不希望在任何内容可编辑div中设置文本格式。
好处是它超级简单。
这个没有使用任何setTimeout()。
我使用这篇很棒的文章来实现跨浏览器支持。
$(document).on("focus", "input[type=text],textarea", function (e) {
var t = e.target;
if (!$(t).data("EventListenerSet")) {
//get length of field before paste
var keyup = function () {
$(this).data("lastLength", $(this).val().length);
};
$(t).data("lastLength", $(t).val().length);
//catch paste event
var paste = function () {
$(this).data("paste", 1);//Opera 11.11+
};
//process modified data, if paste occured
var func = function () {
if ($(this).data("paste")) {
alert(this.value.substr($(this).data("lastLength")));
$(this).data("paste", 0);
this.value = this.value.substr(0, $(this).data("lastLength"));
$(t).data("lastLength", $(t).val().length);
}
};
if (window.addEventListener) {
t.addEventListener('keyup', keyup, false);
t.addEventListener('paste', paste, false);
t.addEventListener('input', func, false);
}
else {//IE
t.attachEvent('onkeyup', function () {
keyup.call(t);
});
t.attachEvent('onpaste', function () {
paste.call(t);
});
t.attachEvent('onpropertychange', function () {
func.call(t);
});
}
$(t).data("EventListenerSet", 1);
}
});
这段代码扩展了粘贴前的选择句柄: 演示
简单的解决方案:
document.onpaste = function(e) {
var pasted = e.clipboardData.getData('Text');
console.log(pasted)
}
解决方案，为我是添加事件监听器粘贴事件，如果你是粘贴到一个文本输入。 由于粘贴事件发生在输入中的文本更改之前，在我的on粘贴处理程序中，我创建了一个延迟函数，其中我检查输入框中发生的粘贴更改:
onPaste: function() {
var oThis = this;
setTimeout(function() { // Defer until onPaste() is done
console.log('paste', oThis.input.value);
// Manipulate pasted input
}, 1);
}
