如何使用右鍵單擊檢測文本是否粘貼

Question

如果我在table1上使用ctrl c和ctrl v粘貼文本（例如在“Apple”上），則table2上輸入的重復文本仍然會更改，但如果我使用右鍵單擊並粘貼，則表2上的重復輸入不會更改。 :(我已經創建了兩個不同的事件（鍵盤和更改），但是當使用右鍵單擊粘貼文本時似乎沒有任何工作。請參閱下面：

Keypress小提琴演示

$(document).off('keydown').on('keydown', $('#table1 tbody tr td input:eq(0)'), function (e) {
var oldValue =$(e.target).val();//get the input value before keypress or edit
    $(document).on('keyup', $('#table1 tbody tr td input'),function(e){ 
        $('#table2').find('td input').each(function(){
            if($(this).val() === oldValue){
                $(this).val($(e.target).val());
            }
        $(document).off('keyup');
        });
    });              
});

改變小提琴演示

var oldValue;
$(document).on('keydown', '.main', function (e) {
    oldValue = $(this).val();
    foo(oldValue);
});
var newValue;
$(document).on('keyup', '.main', function (e) {
    newValue = $(this).val();
    foo(oldValue);
});
function foo(oldValue) {
    $('#table1').find('tbody tr').find('td input').change(function (i) {
        var orig = $(this).val();

        $('#table2 tbody tr').find('td input').each(function (i) {
            if (oldValue == $(this).val()) {
                $(this).val(orig);
            }
        });
    });
}

Answer 1

您可以計算字符onChange（因為您一次只能輸入一個字符）。

編輯：

為什么不工作：

在你的jsfiddle上記得在框架和擴展中設置onDomReady ，相當於$(document).ready(handlerFn)

當您on('change', handlerFn)使用on('change', handlerFn)或.change(handlerFn)時，它將僅在文本框失去焦點（ blur ）后才會觸發。 當您在表單上使用select時，響應不是即時的。 對bind("input", handlerFn)使用bind("input", handlerFn)而不是on(change) 。

下面的代碼將更新＃table2上正在編輯的＃table1上的匹配單詞。 更新將適用於復制粘貼CTRL C / V或鼠標復制/粘貼事件。 如果用戶通過比較舊值和新值的長度來復制/粘貼，它也會發出警報。

$("#table1 >* input").each(function() {
    var elem = $(this),
    oldValue;

    elem.on('focus', function () {
        elem.data('oldVal', elem.val());
        elem.data('oldLen', elem.data('oldVal').length);
    });

    // Look for changes in the value, 
    // bind 'input' event to the textbox to fire the function
    // every time the input changes (paste, delete, type etc.)
    elem.bind("input", function(event){
        oldValue = elem.data('oldVal');
        // update oldVal
        elem.data('oldVal', elem.val());
        // check if pasted
        if (elem.val().length - elem.data('oldLen') > 1 ) {
            alert('Most certainly pasted');
        }
        // update input value length
        elem.data('oldLen', elem.data('oldVal').length);

        // update #table2
       foo(oldValue, elem.val()) ;
    });
});

以及更新＃table2的功能

function foo(oldValue, newValue) {
    $('#table2')
      .find('input')
      .each(function (i) {
          if (oldValue === $(this).val()) {
              $(this).val(newValue);
          }
      });
}

這是一個讓你玩的小提琴

Answer 2

檢查此代碼，希望這會對您有所幫助：

jQuery('#some_text_box').on('input propertychange paste', function() {
    var text1 = $('#some_text_box').val();
    //alert(text1);

    $('#tab2').val(text1);

});

這是你的第一個文本框#some_text_box 。

<input type='text' value = "Apple" id='some_text_box' />

這是表2的文本框#tab2

<input type='text' value="Apple" id='tab2'/>

的jsfiddle

Answer 3

好吧，如果用戶使用Ctrl + V等，這將檢測到你，但就是這樣。 如果他們右鍵單擊並粘貼，那么您將需要另一個表達式來捕獲它。 我通過使用keydown和keyup保持打開狀態，以便您可以根據需要捕獲更多變體。

這是jQuery所以你需要庫來覆蓋這個。

$(document).ready(function()
{
    var ctrlDown = false;
    var ctrlKey = 17, vKey = 86, cKey = 67;

    $(document).keydown(function(e)
    {
        if (e.keyCode == ctrlKey) ctrlDown = true;
    }).keyup(function(e)
    {
        if (e.keyCode == ctrlKey) ctrlDown = false;
    });

    $("#no-copy-paste").keydown(function(e)
    {
        if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey)) return false;
    });
});

這是一篇關於處理程序的文章，也可能對你有所幫助。 http://unixpapa.com/js/key.html

-Epik