web-dev-qa-db-ja.com

ペースト入力をキャッチ

ブラウザに貼り付ける入力をサニタイズする方法を探していますが、これはjQueryで可能ですか？

私はこれまでのところこれを思いついた：

$(this).live(pasteEventName, function(e) {
 // this is where i would like to sanitize my input
 return false;
}

残念ながら、この「マイナーな」問題のために、私の開発は悲鳴を上げています。誰かが私を正しい方向に向けることができれば、私は本当に幸せなキャンピングカーになります。

jquerypastesanitize
197
Christoffer Winterkvist

私は次のコードを使用してそれを修正しました：

$("#editor").live('input paste',function(e){
    if(e.target.id == 'editor') {
        $('<textarea></textarea>').attr('id', 'paste').appendTo('#editMode');
        $("#paste").focus();
        setTimeout($(this).paste, 250);
    }
});

ここで、キャレットの場所を保存し、その位置に追加するだけで、すべて設定できます... :)

18
Christoffer Winterkvist

OK、同じ問題にぶつかりました。

$('input').on('paste', function () {
  var element = this;
  setTimeout(function () {
    var text = $(element).val();
    // do something with text
  }, 100);
});

.val（）funcが読み込まれるまでのわずかなタイムアウト。

E.

322
Evgeni Dimov

実際には、値を event から直接取得できます。それに到達する方法は少し鈍いです。

通過させたくない場合はfalseを返します。

$(this).on('paste', function(e) {

  var pasteData = e.originalEvent.clipboardData.getData('text')

});
59
Charles Haro

プラットフォーム間の互換性のために、oninputイベントとonpropertychangeイベントを処理する必要があります。

$ (something).bind ("input propertychange", function (e) {
    // check for paste as in example above and
    // do something
})
40
Xue Liangliang

うーん... Ithinke.clipboardDataを使用して、貼り付けられているデータをキャッチできます。うまくいかない場合は、 here を見てください。

$(this).live("paste", function(e) {
    alert(e.clipboardData); // [object Clipboard]
});
10
moff

貼り付けイベントをリッスンし、キーアップイベントリスナーを設定します。キーアップ時に、値をキャプチャし、キーアップイベントリスナーを削除します。

$('.inputTextArea').bind('paste', function (e){
    $(e.target).keyup(getInput);
});
function getInput(e){
    var inputText = $(e.target).val();
    $(e.target).unbind('keyup');
}
9
Eric

これはあなたが望むかもしれないものに近づいています。

function sanitize(s) {
  return s.replace(/\bfoo\b/g, "~"); 
};

$(function() {
 $(":text, textarea").bind("input paste", function(e) {
   try {
     clipboardData.setData("text",
       sanitize(clipboardData.getData("text"))
     );
   } catch (e) {
     $(this).val( sanitize( $(this).val() ) );
   }
 });
});

（IE以外のブラウザで）clipboardDataオブジェクトが見つからない場合、現在要素の完全な値+クリップボードの値を取得していることに注意してください。

実際にどのデータが要素に貼り付けられた後のみである場合は、入力前と入力後の2つの値を変えるためにいくつかの追加手順を行うことができます。

6
Mister Lucky
 $('').bind('input propertychange', function() {....});

これは、マウスペーストイベントで機能します。

5
Abhiram
$("#textboxid").on('input propertychange', function () {
    //perform operation
        });

それは正常に動作します。

5
Rajat Jain

フィールドの元の値とフィールドの変更された値を比較し、その差を貼り付けられた値として差し引きますか？これにより、フィールドに既存のテキストがある場合でも、貼り付けられたテキストが正しくキャッチされます。

http://jsfiddle.net/6b7sK/

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);
    });
});
5
Alo Sarv

このコードは、右クリックで貼り付けるか、直接コピーして貼り付けるかのどちらかで機能しています

   $('.textbox').on('paste input propertychange', function (e) {
        $(this).val( $(this).val().replace(/[^0-9.]/g, '') );
    })

Section 1: Labour Costを貼り付けると、テキストボックスで1になります。

Float値のみを許可するには、このコードを使用します

 //only decimal
    $('.textbox').keypress(function(e) {
        if(e.which == 46 && $(this).val().indexOf('.') != -1) {
            e.preventDefault();
        } 
       if (e.which == 8 || e.which == 46) {
            return true;
       } else if ( e.which < 48 || e.which > 57) {
            e.preventDefault();
      }
    });
5
RN Kushwaha
document.addEventListener('paste', function(e){
    if(e.clipboardData.types.indexOf('text/html') > -1){
        processDataFromClipboard(e.clipboardData.getData('text/html'));
        e.preventDefault();

        ...
    }
});

さらに：

4
davidcondrey

この例を参照してください： http://www.p2e.dk/diverse/detectPaste.htm

入力イベントですべての変更を本質的に追跡し、文字列比較による貼り付けかどうかを確認します。ああ、IEにはonpasteイベントがあります。そう：

$ (something).bind ("input paste", function (e) {
    // check for paste as in example above and
    // do something
})
3
Ilya Birman

このメソッドはjqueries contents（）。unwrap（）を使用します。

  1. まず、貼り付けイベントを検出します
  2. 貼り付け先の要素に既にあるタグに一意のクラスを追加します。

  3. 所定のタイムアウト後、以前に設定したクラスを持たないすべてのコンテンツのアンラップタグをスキャンします。注：このメソッドは、次のような自己終了タグを削除しません
    以下の例を参照

    //find all children .find('*') and add the class .within .addClass("within") to all tags
$('#answer_text').find('*').each(function () {
$(this).addClass("within");
});
setTimeout(function() {
$('#answer_text').find('*').each(function () {
    //if the current child does not have the specified class unwrap its contents
    $(this).not(".within").contents().unwrap();
});
}, 0);
1
Shadrack B. Orina

これは非常に幻想的であることが判明しました。入力の値は、貼り付けイベント関数内のコードの実行前に更新されません。貼り付けイベント関数内から他のイベントを呼び出してみましたが、入力値はイベントの関数内の貼り付けられたテキストでまだ更新されていません。それはキーアップを除くすべてのイベントです。貼り付けイベント関数内からキーアップを呼び出す場合、キーアップイベント関数内から貼り付けたテキストを無害化できます。そのようです...

$(':input').live
(
    'input paste',
    function(e)
    {
        $(this).keyup();
    }
);

$(':input').live
(
    'keyup',
    function(e)
    {
        // sanitize pasted text here
    }
);

ここに1つの警告があります。 Firefoxでは、すべてのキーアップで入力テキストをリセットする場合、テキストが入力幅で許可される表示可能領域よりも長い場合、すべてのキーアップで値をリセットすると、ブラウザ機能が壊れて、テキストがテキストの終わり。代わりに、テキストは先頭にスクロールして戻り、キャレットは見えなくなります。

0
James Tindall