217

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

私はこれまでにこれを思い付くことができました：

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

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

4

17 に答える 17

347

OK、ちょうど同じ問題にぶつかった..私は長い道のりを歩んだ

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

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

E.

于 2009-10-01T11:35:57.767 に答える
77

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

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

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

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

});
于 2015-04-23T18:30:21.283 に答える
44

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

$ (something).bind ("input propertychange", function (e) {
    // check for paste as in example above and
    // do something
})
于 2012-04-10T08:28:00.117 に答える
19

次のコードを使用して修正しました。

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

今、私はキャレットの位置を保存し、その位置に追加する必要があるだけです.それで準備が整いました...私は思います:)

于 2009-03-27T05:47:19.120 に答える
10

うーん...貼り付けられているデータをキャッチするために使用できると思います。e.clipboardDataうまくいかない場合は、こちらをご覧ください。

$(this).live("paste", function(e) {
    alert(e.clipboardData); // [object Clipboard]
});
于 2009-03-26T18:37:45.047 に答える
9

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

$('.inputTextArea').bind('paste', function (e){
    $(e.target).keyup(getInput);
});
function getInput(e){
    var inputText = $(e.target).val();
    $(e.target).unbind('keyup');
}
于 2010-08-26T16:18:35.317 に答える
6 
 $('').bind('input propertychange', function() {....});

これは、マウスの貼り付けイベントで機能します。

于 2014-10-07T16:49:14.757 に答える
5

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

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);
    });
});
于 2013-05-06T18:15:42.707 に答える
4 
document.addEventListener('paste', function(e){
    if(e.clipboardData.types.indexOf('text/html') > -1){
        processDataFromClipboard(e.clipboardData.getData('text/html'));
        e.preventDefault();

        ...
    }
});

さらに遠く：

于 2014-12-23T05:44:28.750 に答える
1

このメソッドは、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);
于 2011-06-19T16:12:34.413 に答える
1

クラス portlet-form-input-field を持つすべてのフィールドから特殊文字を削除するスクリプト:

// Remove special chars from input field on paste
jQuery('.portlet-form-input-field').bind('paste', function(e) {
    var textInput = jQuery(this);
    setTimeout(function() {
        textInput.val(replaceSingleEndOfLineCharactersInString(textInput.val()));
    }, 200);
});

function replaceSingleEndOfLineCharactersInString(value) {
    <%
        // deal with end-of-line characters (\n or \r\n) that will affect string length calculation,
        // also remove all non-printable control characters that can cause XML validation errors
    %>
    if (value != "") {
        value = value.replace(/(\x00|\x01|\x02|\x03|\x04|\x05|\x06|\x07|\x08|\x0B|\x0C|\x0E|\x0F|\x10|\x11|\x12|\x13|\x14|\x15|\x16|\x17|\x18|\x19|\x1A|\x1B|\x1C|\x1D|\x1E|\x1F|\x7F)/gm,'');
        return value = value.replace(/(\r\n|\n|\r)/gm,'##').replace(/(\#\#)/gm,"\r\n");
    }
}
于 2012-12-16T22:32:11.217 に答える
0

これは非常に幻想的であることが判明しました。入力の値は、貼り付けイベント関数内のコードの実行前に更新されません。貼り付けイベント関数内から他のイベントを呼び出してみましたが、イベントの関数内で貼り付けられたテキストで入力値が更新されません。これは、keyup 以外のすべてのイベントです。貼り付けイベント関数内から keyup を呼び出すと、貼り付けられたテキストを keyup イベント関数内からサニタイズできます。そのようです...

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

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

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

于 2009-07-22T17:44:45.520 に答える
-2

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

function scroll(elementToBeScrolled) 
{
     //this will reset the scroll to the bottom of the viewable area. 
     elementToBeScrolled.topscroll = elementToBeScrolled.scrollheight;
}
于 2010-05-21T12:18:01.243 に答える