Change selected text via javascript

Question

window.addEventListener("keydown", function(e){
/*
keyCode: 8
keyIdentifier: "U+0008"
*/
if(e.keyCode === 16 && getSelectionText() != "") {
    e.preventDefault();
      replaceSelectedText(strcon(getSelectionText()));
    }
});

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

function strcon(givenString) {
    var b = '';
    var a = givenString;
    for (i = 0; i < a.length; i++) {
        if (a.charCodeAt(i) >= 65 && a.charCodeAt(i) <= 90) {
            b = b + a.charAt(i).toLowerCase();
        }
        else
            b = b + a.charAt(i).toUpperCase();
    }
    return b;
}

function replaceSelectedText(replacementText) {
    var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode(document.createTextNode(replacementText));
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.text = replacementText;
    }
}

The code I have right now seems to change the appearance of the actual text instead of actually changing it. For example, when I'm on Facebook and I press the certain key, the text seems to have changed but then when I press enter, the text goes back to what it was before.

I believe the issue is with the function replaceSelectedText but I'm not sure how to fix it.

Any ideas?

No JQuery please.

https://jsfiddle.net/1rvz3696/

I don't understand the problem. I tried your jsfiddle: I entered "hello foobar". I select a word and press shift key. Then the word appears before the input box as capital letters. What of this is undesired behavior? — owler
– owler, Commented Apr 28, 2016 at 3:33
@ILovephp123 I still don't get it.. Your fiddle works fine to me or I really still dont get it — choz
– choz, Commented Apr 28, 2016 at 3:33
@owler, the goal is to replace the selected text, not add it somewhere else — Dgameman1
– Dgameman1, Commented Apr 28, 2016 at 3:35

choz · Accepted Answer · 2016-04-28 04:01:44Z

5

You have to get your textarea element to replace the value in it. This is how your replaceSelectedText function should look like,

function replaceSelectedText(text) {
  var txtArea = document.getElementById('myTextArea');
  if (txtArea.selectionStart != undefined) {
    var startPos = txtArea.selectionStart;
    var endPos = txtArea.selectionEnd;
    selectedText = txtArea.value.substring(startPos, endPos);
    txtArea.value = txtArea.value.slice(0, startPos) + text + txtArea.value.slice(endPos);
  }
}

And here's the Fiddle.

Without specific id, you can replace txtArea to this.

var txtArea = document.activeElement;

And another Fiddle

edited Apr 28, 2016 at 4:01

answered Apr 28, 2016 at 3:52

choz

18k5 gold badges58 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dgameman1 Over a year ago

But what if there's no specific ID, I want it to be used in any place where a person can put text

Collectives™ on Stack Overflow

Change selected text via javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related