jQuery绑定到Paste Event,如何获取粘贴的内容
我有一个jQuery的标记标记插件,我想绑定到粘贴事件正确添加项目。
我可以像这样绑定到粘贴事件:
.bind("paste", paste_input)
…
function paste_input(e) { console.log(e) return false; }
我如何获得实际粘贴的内容值?
在现代浏览器中有一个onpaste事件。 您可以使用clipboardData
对象上的getData
函数访问粘贴的数据。
$("#textareaid").bind("paste", function(e){ // access the clipboard using the api var pastedData = e.originalEvent.clipboardData.getData('text'); alert(pastedData); } );
所有现代浏览器都支持剪贴板API。 更多信息可以在http://caniuse.com/#feat=clipboardfind
从JQuery中如何处理粘贴?
这个怎么样: http : //jsfiddle.net/5bNx4/
如果您使用jq1.7等,请使用.on
。
行为:当你键入任何东西或paste
任何东西在第一textarea下面的teaxtarea捕获cahnge。
rest我希望它有助于事业。 :)
有用的链接=>
你如何处理jQuery中的oncut,oncopy和onpaste?
抓住粘贴input
码
$(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); }); });
我最近需要完成类似的事情。 我使用以下devise来访问粘贴元素和值。 jsFiddle演示
$('body').on('paste', 'input, textarea', function (e) { setTimeout(function () { //currentTarget added in jQuery 1.3 alert($(e.currentTarget).val()); //do stuff },0); });
您可以比较字段的原始值和字段的变化值,并将差值作为粘贴值进行扣除。 即使字段中存在文本,也会正确捕获粘贴的文本。
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); }); });
$(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'); } });
这将看起来好像这个事件有一些clipboardData
属性附加到它(它可能嵌套在originalEvent
属性)。 clipboardData
包含一个项目数组,每个项目都有一个可以调用的getAsString()
函数。 这将返回项目内容的string表示forms。
这些项目也有一个getAsFile()
函数,以及其他一些浏览器特定的(例如在webkit浏览器中,有一个webkitGetAsEntry()
函数)。
为了我的目的,我需要string的值被粘贴。 所以,我做了类似的事情:
$(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. }); });
你会想要通过项目进行迭代,保持string连接结果。
事实上,有一系列的项目使我认为需要做更多的工作,分析每个项目。 你也想做一些空值检查。
这项工作在所有的浏览器上获得粘贴的价值。 也为所有的文本框创build通用的方法。
$("#textareaid").bind("paste", function(e){ var pastedData = e.target.value; alert(pastedData); } )