How to Detect Right Mouse Click + Paste Using JavaScript

How to detect right mouse click + paste using JavaScript?

With IE you have onpaste

With Mozilla you can look into
oninput
and

elementReference.addEventListener("DOMCharacterDataModified", function(e){ foo(e);}, false);

There is no easy as pie solution.

Eric

Fire event with right mouse click and Paste

Most browsers support the input event, which is fired when something is pasted or otherwise added, regardless of how:

$("#message").on('keyup contextmenu input', function(event) { 
  alert("ok");
});

Updated Fiddle

Note that using input is the most general method, firing when the control gets input regardless of how, and so if you hook multiple events (as above), you'll get multiple calls for the same input. For instance, if you hook both keyup and input, on browsers that support input, you'll get two calls. Similarly for paste and input when the user pastes, on browsers that support both.

If you need to support browsers that don't have either input or paste, I'm afraid the unfortunate answer is that you need to poll. Still, polling every (say) 250ms isn't asking the browser to do that much work, and you can feature-detect whether it's necessary:

var message = $("#message");
var events = null;
var previous;
if ('oninput' in message[0]) {
    // Browser supports input event
    events = "input";
} else if ('onpaste' in message[0]) {
    // Browser supports paste event
    events = "paste keyup contextmenu";
}
if (!events) {
    // Ugh, poll and fire our own
    events = "pseudoinput";
    previous = message.val();
    setInterval(function() {
        var current = message.val();
        if (current != previous) {
            previous = current;
            message.trigger(events);
        }
    }, 250);
}
console.log("Using: " + events);
message.on(events, function(e) { 
  console.log("Got event: " + e.type);
});

Updated Fiddle

How can I detect if text is paste using right-click

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

Detect pasted text with Ctrl+v or right click - paste

You could use the paste event to detect the paste in most browsers (notably not Firefox 2 though). When you handle the paste event, record the current selection, and then set a brief timer that calls a function after the paste has completed. This function can then compare lengths and to know where to look for the pasted content. Something like the following. For the sake of brevity, the function that gets the textarea selection does not work in IE. See here for something that does: How to get the start and end points of selection in text area?

function getTextAreaSelection(textarea) {
    var start = textarea.selectionStart, end = textarea.selectionEnd;
    return {
        start: start,
        end: end,
        length: end - start,
        text: textarea.value.slice(start, end)
    };
}

function detectPaste(textarea, callback) {
    textarea.onpaste = function() {
        var sel = getTextAreaSelection(textarea);
        var initialLength = textarea.value.length;
        window.setTimeout(function() {
            var val = textarea.value;
            var pastedTextLength = val.length - (initialLength - sel.length);
            var end = sel.start + pastedTextLength;
            callback({
                start: sel.start,
                end: end,
                length: pastedTextLength,
                text: val.slice(sel.start, end)
            });
        }, 1);
    };
}

var textarea = document.getElementById("your_textarea");
detectPaste(textarea, function(pasteInfo) {
    alert(pasteInfo.text);
    // pasteInfo also has properties for the start and end character
    // index and length of the pasted text
});

Invoke a function after right click paste in jQuery

Kind of a hack, but:

$("#id").bind('paste', function(e) {
        var ctl = $(this);
        setTimeout(function() {
            //Do whatever you want to $(ctl) here....
        }, 100);
});

How to distinguish between left and right mouse click with jQuery

As of jQuery version 1.1.3, event.which normalizes event.keyCode and event.charCode so you don't have to worry about browser compatibility issues. Documentation on event.which

event.which will give 1, 2 or 3 for left, middle and right mouse buttons respectively so:

$('#element').mousedown(function(event) {
    switch (event.which) {
        case 1:
            alert('Left Mouse button pressed.');
            break;
        case 2:
            alert('Middle Mouse button pressed.');
            break;
        case 3:
            alert('Right Mouse button pressed.');
            break;
        default:
            alert('You have a strange Mouse!');
    }
});

How to detect right click + left click

JSfiddle: https://jsfiddle.net/mkarajohn/pd725ch6/5/

var rightMouseClicked = false;

function handleMouseDown(e) {
  //e.button describes the mouse button that was clicked
  // 0 is left, 1 is middle, 2 is right
  if (e.button === 2) {
    rightMouseClicked = true;
  } else if (e.button === 0) {  
    //Do something if left button was clicked and right button is still pressed
    if (rightMouseClicked) {
      console.log('hello');
      //code
    }
  }
  console.log(rightMouseClicked);
}

function handleMouseUp(e) {
  if (e.button === 2) {
    rightMouseClicked = false;
  }
  console.log(rightMouseClicked);
}

document.addEventListener('mousedown', handleMouseDown);
document.addEventListener('mouseup', handleMouseUp);
document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
});

---

Related Topics