Simulate cut function with JavaScript?

Question

I'm working on a chrome extension and I want to do something with the text that is selected (highlighted by the user) on the page. For that, I need a way to remove the selected text, for example text inside an input field.

I found a way to "clear" the selected text, meaning it will be unselected: Clear Text Selection with JavaScript But it doesn't seem to be what I'm looking for.

This just removes the highlighting from the text:

window.getSelection().empty();

I want to remove the text that is selected, if it's editable text. Is this possible with JavaScript?

score 3 · Accepted Answer · edited Apr 08 '19 at 12:05

3

You can use the deleteFromDocument method:

window.getSelection().deleteFromDocument()

This will immediately remove the selected content from the document, and as such also clear the selection.

As described formally in the MDN web docs:

The deleteFromDocument() method of the Selection interface deletes the selected text from the document's DOM.

If you'd like to be able to delete text from input elements instead, you need to use different APIs:

var activeEl = document.activeElement;
var text = activeEl.value;

activeEl.value = text.slice(0, activeEl.selectionStart) + text.slice(activeEl.selectionEnd);

Edit from me, Synn Ko: to cover input fields, textareas and contenteditables, use this:

var selection = window.getSelection();
var actElem = document.activeElement;
var actTagName = actElem.tagName;

if(actTagName == "DIV") {
    var isContentEditable = actElem.getAttribute("contenteditable"); // true or false
    if(isContentEditable) {
        selection.deleteFromDocument();
    }
}

if (actTagName == "INPUT" || actTagName == "TEXTAREA") {
    var actText = actElem.value;

    actElem.value = actText.slice(0, actElem.selectionStart) + actText.slice(actElem.selectionEnd);
}

edited Apr 08 '19 at 12:05

Synn Ko

137
1
15

answered Apr 06 '19 at 21:26

Aaron Christiansen

11,584
5
52
78

I just realized you can even cut text with this function that isn't editable... any way to limit the "power" of this function? Not a deal breaker or anything, but I don't really need users to be able to remove any text from a page, just the text that is normally removable with CTRL + X. – Synn Ko Apr 06 '19 at 21:42
@SynnKo I've updated my answer with some code which should enable this. Give it a go and let me know how you get on! – Aaron Christiansen Apr 07 '19 at 10:14
That doesn't seem to work. I tried it in the console on this page, using either the comment textarea or the search field at the top, but neither seem to work, even when I remove parentElement (as it gave me DIV or FORM back instead of the expected INPUT and TEXTAREA), and adding another element to check in the if doesn't work either. Not sure what I'm doing wrong. – Synn Ko Apr 07 '19 at 13:47
@SynnKo Ah, my mistake, apologies. I was unaware that `getSelection` can't actually get selection inside an `input`. Give the revised code in my answer a try. – Aaron Christiansen Apr 07 '19 at 18:24
Thanks a lot for your help so far - your new solution does indeed work for input fields, but it doesn't work for contenteditables unfortunately (I tried it with Google Keep). Looks like I'd need to use a combination of your old and your new solution to be consistent, so I'm working on that now. – Synn Ko Apr 08 '19 at 00:13
I figured it out and added the code to your answer if you don't mind. There's still some tweaking needed to make it work for what I want it to be able to do, but it's a good start. Again, thanks for all your help! – Synn Ko Apr 08 '19 at 01:52

Simulate cut function with JavaScript?

1 Answers1