Jqueryトークンtagitプラグインがあり、pasteイベントにバインドしてアイテムを正しく追加したいです。
次のように貼り付けイベントにバインドできます。
.bind("paste", paste_input)
...
function paste_input(e) {
console.log(e)
return false;
}
実際に貼り付けられたコンテンツの値を取得するにはどうすればよいですか?
現代のブラウザで機能するonpasteイベントがあります。 getData
オブジェクトのclipboardData
関数を使用して、貼り付けたデータにアクセスできます。
$("#textareaid").bind("paste", function(e){
// access the clipboard using the api
var pastedData = e.originalEvent.clipboardData.getData('text');
alert(pastedData);
} );
bind および nbind はjQuery 3で非推奨になっていることに注意してください。推奨される呼び出しは on です。
現代のすべてのブラウザは Clipboard API をサポートしています。
これはどうですか: http://jsfiddle.net/5bNx4/
Jq1.7などを使用している場合は、.on
を使用してください。
動作:1番目のテキストエリアに何かを入力するかpaste
何かを入力すると、下のteaxtareaが変更をキャプチャします。
それが原因に役立つことを願っています。 :)
役立つリンク=>
jQueryでoncut、oncopy、onpasteをどのように処理しますか?
コード
$(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);
});
});
私は最近、これに似た何かを達成する必要がありました。次のデザインを使用して、貼り付け要素と値にアクセスしました。 jsFiddleデモ
$('body').on('paste', 'input, textarea', function (e)
{
setTimeout(function ()
{
//currentTarget added in jQuery 1.3
alert($(e.currentTarget).val());
//do stuff
},0);
});
別のアプローチ:input
イベントはpaste
イベントもキャッチします。
$('textarea').bind('input', function () {
setTimeout(function () {
console.log('input event handled including paste event');
}, 0);
});
$(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');
}
});
フィールドの元の値とフィールドの変更された値を比較し、貼り付けられた値として差額を差し引くことができます。これにより、フィールドに既存のテキストがある場合でも、貼り付けたテキストが正しくキャッチされます。
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);
});
});
これはすべてのブラウザで機能し、貼り付けられた値を取得します。また、すべてのテキストボックスに共通のメソッドを作成します。
$("#textareaid").bind("paste", function(e){
var pastedData = e.target.value;
alert(pastedData);
} )
このイベントには、いくつかの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.
});
});
文字列の連結結果を保持しながら、アイテムを反復処理する必要があります。
アイテムの配列があるという事実から、各アイテムを分析して、さらに作業を行う必要があると思います。また、いくつかのnull/valueチェックを実行する必要があります。