-1

I want to fire an event before cut, so that I can get what text is being cut i.e. what has been already selected. I am currently using the following code, which doesn't seem to work as desired.

    $("#editor").bind({
    cut:function(){
        console.log('Cut Detected');            
       alert(editor.selection.getRange());

    }
});

editor is the id of the "div" tag which is editable. editor.selection.getRange() returns the start and end of selection. edit I am woring with content editable div and want to apply the functionality on it.

 <!DOCTYPE html>
<html lang="en">
<head>
<title>Editor</title>
</head>
<body>

<div id='myTa' contenteditable>hello world where are you</div>
<script type='text/javascript' src='jquery-2.1.4.min.js'></script>
<script type='text/javascript'>
$("#myTa").on("cut", function(){
alert(this.selectionStart+ " to " + this.selectionEnd);
})
</script>


</body>
</html>
3
  • 3
    So should the title of this question be, "Fire an event before cut."?
    – Pointy
    Jun 20, 2015 at 11:32
  • Are you using tinymce editor?
    – Manjar
    Jun 20, 2015 at 11:36
  • I am using ace editor. Jun 21, 2015 at 6:42

3 Answers 3

0

You are correct that you need to use the cut event. The ClipboardEvent API is apparently unstable but yes, I would have thought it would include the text being moved onto the clipboard.

The following works for me:

$("textarea").on("cut", function(){
    alert(this.value.substring(this.selectionStart, this.selectionEnd));
})

It's worth noting that bind is deprecated in jQuery, you should use on instead. Try out the snippet:

$("textarea").on("cut", function() {
      alert(this.value.substring(this.selectionStart, this.selectionEnd));
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>

2
  • I am trying to apply the above code on contenteditable div, the code doesn't seems to work on that. please suggest a work-around. my code: [link] freetexthost.com/kimbohwfwm Jun 21, 2015 at 6:45
  • In the code you linked to you have not copied the code above correctly: alert(this.selectionStart+ " to " + this.selectionEnd); will not work, you need to use selectionStart and selectionEnd to get a substring. Read over the above solution again.
    – jcuenod
    Jun 22, 2015 at 7:19
0

I think at first that clipboardEvent will have the clipped text, but it seems not, so I try to find the selection related properties of input and found it.

And the reference is HTMLInputElement.

This codes work in presumption that your $("#editor") is either an input or textarea.

$("#editor").bind({
    cut:function(e){
        console.log('Cut Detected');
        var $this = $(this);
        var selectStart = this.selectionStart;
        var selectionEnd = this.selectionEnd;
       var clippedValue = $this.val().slice(selectStart, selectionEnd);
       // Now you have the clipped value, do whatever you want with the
       // value.
       alert(clippedValue);
    }
});

For works on contentediable, you can do this, which I just found info from Return HTML from a user-selected text and MDN

$("#myTa").on("cut", function(e){
    // Seems diff bro
    var selections = window.getSelection();
    var currentSelection = selections.getRangeAt(0);
    var start = currentSelection.startOffset;
    var end  = currentSelection.endOffset;
    var selectedContents = currentSelection.toString();
    // Do whatever you want.
    console.log(start, end);
    console.log(selectedContents);
    alert(selectedContents);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id='myTa' contenteditable>ask;ndjkasn asdbasj aujs d sdib askjbnsaab asbh mjn a</div>

2
  • I am trying to apply the above code on contenteditable div, the code doesn't seems to work on that. please suggest a work-around. my code: [link] freetexthost.com/kimbohwfwm Jun 21, 2015 at 6:43
  • @RohitKatariya Hello? Did you notice that I've create a snippet to show how to do what is done in input for contenteditable div? Jun 21, 2015 at 17:28
0

I have got the solution to my answer. apperently there is an editor.on('cut',function(e)) in ace editor I use

editor.on("cut", function(e){
        console.log('Cut Detected');
        console.log(editor.selection.getRange());
    });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.