Javascript jQuery绑定粘贴事件，如何获取粘贴的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11605415/
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
jQuery bind to Paste Event, how to get the content of the paste
提问by AnApprentice
I have a jquery token tagit plugin and I want to bind to the paste event to add items correctly.
我有一个 jquery token tagit 插件，我想绑定到 paste 事件以正确添加项目。
I'm able to bind to the paste event like so:
我可以像这样绑定到 paste 事件：
.bind("paste", paste_input)
...
...
function paste_input(e) {
console.log(e)
return false;
}
How can I obtain the actual pasted content value?
如何获取实际粘贴的内容值？
回答by jeff
There is an onpaste event that works in modern day browsers. You can access the pasted data using the getDatafunction on the clipboardDataobject.
有一个适用于现代浏览器的 onpaste 事件。您可以使用对象getData上的函数访问粘贴的数据clipboardData。
$("#textareaid").bind("paste", function(e){
// access the clipboard using the api
var pastedData = e.originalEvent.clipboardData.getData('text');
alert(pastedData);
} );
Note that bindand unbindare deprecated as of jQuery 3. The preferred call is to on.
请注意，从 jQuery 3 开始不推荐使用bind和unbind。首选调用是on。
All modern day browsers support the Clipboard API.
所有现代浏览器都支持剪贴板 API。
See also: In Jquery How to handle paste?
另请参阅：在 Jquery 如何处理粘贴？
回答by Tats_innit
How about this: http://jsfiddle.net/5bNx4/
这个怎么样：http: //jsfiddle.net/5bNx4/
Please use .onif you are using jq1.7 et al.
.on如果您使用的是 jq1.7 等，请使用。
Behaviour: When you type anything or pasteanything on the 1st textarea the teaxtarea below captures the cahnge.
行为：当您paste在第一个 textarea 上键入任何内容或任何内容时，下面的 textarea 会捕获更改。
Rest I hope it helps the cause. :)
休息我希望它有助于事业。 :)
Helpful link =>
有用的链接 =>
How do you handle oncut, oncopy, and onpaste in jQuery?
你如何处理 jQuery 中的 oncut、oncopy 和 onpaste？
code
代码
$(document).ready(function() {
var $editor = $('#editor');
var $clipboard = $('<textarea />').insertAfter($editor);
if(!document.execCommand('StyleWithCSS', false, false)) {
document.execCommand('UseCSS', false, true);
}
$editor.on('paste, keydown', function() {
var $self = $(this);
setTimeout(function(){
var $content = $self.html();
$clipboard.val($content);
},100);
});
});
回答by Kevin
I recently needed to accomplish something similar to this. I used the following design to access the paste element and value. jsFiddle demo
我最近需要完成类似的事情。我使用以下设计来访问粘贴元素和值。jsFiddle 演示
$('body').on('paste', 'input, textarea', function (e)
{
setTimeout(function ()
{
//currentTarget added in jQuery 1.3
alert($(e.currentTarget).val());
//do stuff
},0);
});
回答by Shahar Shokrani
Another approach:
That inputevent will catch also the pasteevent.
另一种方法：该input事件也将捕获该paste事件。
$('textarea').bind('input', function () {
setTimeout(function () {
console.log('input event handled including paste event');
}, 0);
});
回答by Cyrus
$(document).ready(function() {
$("#editor").bind('paste', function (e){
$(e.target).keyup(getInput);
});
function getInput(e){
var inputText = $(e.target).html(); /*$(e.target).val();*/
alert(inputText);
$(e.target).unbind('keyup');
}
});
回答by Alo Sarv
You could compare the original value of the field and the changed value of the field and deduct the difference as the pasted value. This catches the pasted text correctly even if there is existing text in the field.
您可以将字段的原始值与字段的更改值进行比较，并将其减去作为粘贴值。即使字段中存在文本，这也会正确捕获粘贴的文本。
function text_diff(first, second) {
var start = 0;
while (start < first.length && first[start] == second[start]) {
++start;
}
var end = 0;
while (first.length - end > start && first[first.length - end - 1] == second[second.length - end - 1]) {
++end;
}
end = second.length - end;
return second.substr(start, end - start);
}
$('textarea').bind('paste', function () {
var self = $(this);
var orig = self.val();
setTimeout(function () {
var pasted = text_diff(orig, $(self).val());
console.log(pasted);
});
});
回答by Yarin
On modern browsers it's easy: just use the inputevent along with the inputTypeattribute:
在现代浏览器上这很简单：只需使用input事件和inputType属性：
$(document).on('input', 'input, textarea', function(e){
if (e.originalEvent.inputType == 'insertFromPaste') {
alert($(this).val());
}
});
回答by Chandler Zwolle
It would appear as though this event has some clipboardDataproperty attached to it (it may be nested within the originalEventproperty). The clipboardDatacontains an array of items and each one of those items has a getAsString()function that you can call. This returns the string representation of what is in the item.
看起来好像这个事件clipboardData附加了一些属性（它可能嵌套在originalEvent属性中）。在clipboardData包含项目的数组和这些项目中的每一个都有一个getAsString()功能，您可以调用。这将返回项目中内容的字符串表示形式。
Those items also have a getAsFile()function, as well as some others which are browser specific (e.g. in webkit browsers, there is a webkitGetAsEntry()function).
这些项目也有一个getAsFile()功能，以及一些浏览器特定的其他项目（例如，在 webkit 浏览器中，有一个webkitGetAsEntry()功能）。
For my purposes, I needed the string value of what is being pasted. So, I did something similar to this:
出于我的目的，我需要粘贴内容的字符串值。所以，我做了类似的事情：
$(element).bind("paste", function (e) {
e.originalEvent.clipboardData.items[0].getAsString(function (pStringRepresentation) {
debugger;
// pStringRepresentation now contains the string representation of what was pasted.
// This does not include HTML or any markup. Essentially jQuery's $(element).text()
// function result.
});
});
You'll want to perform an iteration through the items, keeping a string concatenation result.
您需要对项目执行迭代，保留字符串连接结果。
The fact that there is an array of items makes me think more work will need to be done, analyzing each item. You'll also want to do some null/value checks.
有一系列项目的事实让我认为需要做更多的工作，分析每个项目。您还需要进行一些空/值检查。
回答by Mukesh Kalgude
This work on all browser to get pasted value. And also to creating common method for all text box.
这适用于所有浏览器以获取粘贴值。以及为所有文本框创建通用方法。
$("#textareaid").bind("paste", function(e){
var pastedData = e.target.value;
alert(pastedData);
} )
