我有一个jquery令牌tagit插件,我想绑定到粘贴事件以正确添加项目。
我能够像这样绑定到粘贴事件:
.bind("paste", paste_input)
...
function paste_input(e) {
console.log(e)
return false;
}
如何获取实际粘贴的内容值?
答案 0 :(得分:112)
有一个onpaste事件适用于现代浏览器。您可以使用getData
对象上的clipboardData
函数访问粘贴的数据。
$("#textareaid").bind("paste", function(e){
// access the clipboard using the api
var pastedData = e.originalEvent.clipboardData.getData('text');
alert(pastedData);
} );
请注意,自jQuery 3起,bind和unbind已被弃用。首选电话是on。
所有现代浏览器都支持Clipboard API。
答案 1 :(得分:17)
这个怎么样:http://jsfiddle.net/5bNx4/
如果您使用的是jq1.7等,请使用.on
。
行为:当您在第一个textarea上键入任何内容或paste
任何内容时,下方的teaxtarea会捕获cahnge。
休息我希望它有助于事业。 :)
有用的链接=>
How do you handle oncut, oncopy, and onpaste in jQuery?
<强>码强>
$(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);
});
});
答案 2 :(得分:6)
我最近需要完成类似的事情。我使用以下设计来访问粘贴元素和值。 jsFiddle demo
$('body').on('paste', 'input, textarea', function (e)
{
setTimeout(function ()
{
//currentTarget added in jQuery 1.3
alert($(e.currentTarget).val());
//do stuff
},0);
});
答案 3 :(得分:1)
您可以比较字段的原始值和字段的更改值,并将差值作为粘贴值。即使字段中存在现有文本,也会正确捕获粘贴的文本。
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);
});
});
答案 4 :(得分:1)
$(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');
}
});
答案 5 :(得分:1)
看起来好像这个事件附加了一些clipboardData
属性(它可能嵌套在originalEvent
属性中)。 clipboardData
包含一系列项目,其中每个项目都有一个getAsString()
函数,您可以调用它。这将返回项目内容的字符串表示形式。
这些项目还具有getAsFile()
功能,以及其他一些特定于浏览器的功能(例如,在webkit浏览器中,有webkitGetAsEntry()
功能。)
出于我的目的,我需要粘贴内容的字符串值。所以,我做了类似的事情:
$(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.
});
});
您需要对项目执行迭代,保持字符串连接结果。
存在一系列项目这一事实使我认为需要做更多的工作,分析每个项目。您还需要进行一些空/值检查。
答案 6 :(得分:1)
这项工作在所有浏览器上获取粘贴值。并且还为所有文本框创建通用方法。
$("#textareaid").bind("paste", function(e){
var pastedData = e.target.value;
alert(pastedData);
} )
答案 7 :(得分:1)
另一种方法:
该input
事件也将捕获paste
事件。
$('textarea').bind('input', function () {
setTimeout(function () {
console.log('input event handled including paste event');
}, 0);
});
答案 8 :(得分:0)