如何使用右键单击检测文本是否粘贴

Question

If I paste text using ctrl c and ctrl v on table1(For example on "Apple"), duplicate text on input on table2 still change, but If i paste using right click and paste,duplicate input on table 2 does NOT change. :( Ive created two different event(keyup and change) but nothing seems to work when text is paste using right click. Please see below :

Keypress fiddle demo

$(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');
        });
    });              
});

on change fiddle demo

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

You can count the characters onChange (since you can only enter one character at a time.

Edit:

Why it wasn't working:

on your jsfiddle remember to set onDomReady in the frameworks & extension for the equivalent of $(document).ready(handlerFn)

When you use on('change', handlerFn) or .change(handlerFn) on an input it will fire only after the textbox loses focus ( blur ). The response is not instantaneous like when you use select on your forms. Use bind("input", handlerFn) instead of on(change) for inputs.

The code below will update the matching word on #table2 from the one being edited on #table1. Updating will work for copy-paste CTRL C/V or on mouse copy/paste events. It will also alert if the user copy/paste by comparing the length of the old and new value.

$("#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()) ;
    });
});

And the function to update #table2

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

here's a jsfiddle for you to play with

Answer 2

Check this code, Hope this will help you:

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

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

});

This is your first text box #some_text_box .

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

And this is table 2 text box #tab2

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

JSFiddle

Answer 3

Ok well this will detect for you if the user uses Ctrl + V etc but thats it. If they right click and paste then you will need another expression to capture that. I left this open by using keydown and keyup so you can capture more variations if needed.

This is jQuery so you will need the library to cover this.

$(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;
    });
});

Here is an article on handlers that may be some help to you as well. http://unixpapa.com/js/key.html

-Epik