在 Javascript 中粘贴事件
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/10833836/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Paste event in Javascript
提问by Karthik Yan
How can I handle the paste selected through right click in javascript? I tried with "onpaste" event and all other html events available but nothing works.
如何处理通过在 javascript 中右键单击选择的粘贴?我尝试了“onpaste”事件和所有其他可用的 html 事件,但没有任何效果。
回答by Dmitry Pashkevich
The onpaste event should work in all modern browsers (UPDIncluding Opera >= 12.101).
onpaste 事件应该适用于所有现代浏览器(UPD包括 Opera >= 12.10 1)。
Bind it in jQuery like this:
像这样在 jQuery 中绑定它:
$('#txt').on('paste', function() {console.log('text pasted!')})?
Here's a live example: http://jsfiddle.net/7N6Xq/
这是一个活生生的例子:http: //jsfiddle.net/7N6Xq/
In pure JavaScript it would look something like this for modern browsers
在纯 JavaScript 中,现代浏览器看起来像这样
elem.addEventListener ("paste", handler, false); // all browsers and IE9+
and for old IE versions:
对于旧的 IE 版本:
elem.attachEvent ("onpaste", handler); // IE<9
You can also combine it with oninputand other events (change, propertychange, dragdrop, etc.) to create a relatively bulletproof tracking of content change.
您还可以将它与oninput和其他事件(change、propertychange、dragdrop等)结合起来,以创建相对防弹的内容更改跟踪。
Footnotes:
脚注:
1Opera supports Clipboard API starting from Presto/2.10.286which corresponds to 12.10 as suggested here. Blink versionsof Opera (starting from 15) should also support it but I am unable to test it as there is still no Linux version.
1Opera 支持从Presto/2.10.286开始的 Clipboard API,它对应于这里建议的 12.10 。Opera 的Blink 版本(从 15 开始)也应该支持它,但我无法测试它,因为仍然没有 Linux 版本。
回答by Jeff Watkins
The event isn't exposed by default as "onpaste" IIRC. You can do it quite simply in jQuery by issuing
默认情况下,该事件不会公开为“onpaste”IIRC。你可以很简单地在 jQuery 中通过发出
jQuery(document).bind('paste', function(e){ alert('paste event caught') });
回答by CodeFan
I was surprised question #4532473 got closed unanswered about what happens if you want to capture the afterpaste event. As this is probably the problem half of the cases a possible approach in firefox (tested) is to register an oninput event right inside the onpaste handler and remove the oninput handler as soon as it's done executing.
我很惊讶问题 #4532473 没有回答关于如果你想捕获后粘贴事件会发生什么。由于这可能是一半情况下的问题,firefox 中的一种可能方法(已测试)是在 onpaste 处理程序中注册一个 oninput 事件,并在完成执行后立即删除 oninput 处理程序。
In ie the onpropertychange should be used instead of oninput. (not tested)
在 ie 中,应该使用 onpropertychange 而不是 oninput。(未测试)
回答by Louis Maddox
Nice pure JS solution (as requested...) is available on the Mozilla dev site
Mozilla 开发站点上提供了不错的纯 JS 解决方案(根据要求...)
<!DOCTYPE html>
<html>
<head>
<title>onpaste event example</title>
</head>
<body>
<h1>Play with this editor!</h1>
<textarea id="editor" rows="3" cols="80">
Try pasting text into this area!
</textarea>
<script>
function log(txt) {
document.getElementById("log").appendChild(document.createTextNode(txt + "\n"));
}
function pasteIntercept(evt) {
log("Pasting!");
}
document.getElementById("editor").addEventListener("paste", pasteIntercept, false);
</script>
<h2>Log</h2>
<textarea rows="15" cols="80" id="log" readonly="true"></textarea>
</body>
</html>