How to intercept a cut and still get the browser to cooperate.

This fiddle demonstrates how it is possible to intercept a "cut" event, and "redirect" it by changing the selection before letting the cut go on.

by lddubeau

HTML

<p id="contents" contenteditable="true">ABCDEF</p>
<p id="target" contenteditable="true"></p>

JavaScript

// As of 2013-11-15 this fiddle works with Firefox 25 and Chrome 30 in
// Linux and in Windows 8. On cut, this code:
//
// 1. records the text selected.
// 2. deletes the selection.
// 3. puts the text recorded into #target.
// 4. sets the selection to select the text in #target.
// 5. Lets the browser finish the cut.
//
// In the browsers mentioned above, the clipboard afterwards will 
// contain the text what the user wanted to cut. FF will keep the
// selection on the text in #target. Whereas Chrome will delete
// the selection.

var $target = $("#target");

$("body").on("cut", function () {
    var sel = window.getSelection();
    var range = sel.getRangeAt(0);
    var value = range.startContainer.nodeValue;
    var text = value.slice(range.startOffset, range.endOffset);
    range.startContainer.nodeValue = value.slice(0, range.startOffset) + value.slice(range.endOffset);
    $target.append(text);
    var range = document.createRange();
    var text_node = $target[0].firstChild;
    range.setStart(text_node, 0);
    range.setEnd(text_node, text_node.nodeValue.length);
    sel.removeAllRanges();
    sel.addRange(range);
    return true;
});