JavaScript在粘贴事件时获取剪贴板数据(跨浏览器)
web应用程序如何检测粘贴事件并检索要粘贴的数据？
我希望在将文本粘贴到富文本编辑器之前删除HTML内容。
在粘贴后清除文本是可行的，但问题是所有以前的格式都会丢失。例如，我可以在编辑器中编写一个句子并将其加粗，但是当我粘贴新文本时，所有格式都会丢失。我只想清理粘贴的文本，并保留以前的任何格式不变。
理想情况下，该解决方案应该适用于所有现代浏览器(例如，MSIE、Gecko、Chrome和Safari)。
请注意，MSIE有clipboardData.getData()，但我找不到适用于其他浏览器的类似功能。
回答 12
Stack Overflow用户
发布于 2012-05-11 20:30:14
我在这里用屏幕外的文本区域为蒂姆·唐斯的提案写了一个小的概念证明。下面是代码：
<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和新版本的火狐、Chrome和Opera上进行了测试。工作得很好。此外，一个人可以使用任何他喜欢的组合键来触发这个功能，这也是很好的。当然，不要忘记包括jQuery源代码。
请随意使用此代码，如果您带来了一些改进或问题，请将它们发布回来。还要注意的是，我不是Javascript开发人员，所以我可能遗漏了一些东西(=>do您自己的研究)。
Stack Overflow用户
发布于 2012-12-14 21:46:08
这个函数没有使用任何setTimeout()。
我使用了this优秀的文章来实现跨浏览器的支持。
$(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);
}
}); 这段代码在粘贴之前扩展了选择句柄：demo
Stack Overflow用户
发布于 2014-01-13 14:24:10
适合我的解决方案是在粘贴到文本输入时添加事件侦听器来粘贴事件。由于paste事件在输入文本更改之前发生，因此在我的on paste处理程序中，我创建了一个延迟函数，在该函数中，我检查在粘贴时输入框中发生的更改：
onPaste: function() {
var oThis = this;
setTimeout(function() { // Defer until onPaste() is done
console.log('paste', oThis.input.value);
// Manipulate pasted input
}, 1);
}https://stackoverflow.com/questions/2176861
复制相似问题