通过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;
    }
}

我现在的代码似乎只是改变了文本的外观，而没有真正地改变它。例如，在Facebook上，当我按下某个键时，文本似乎已经改变了，但是当我按回车键时，文本又回到了以前的样子。

我认为问题出在replaceSelectedText函数上，但我不知道该如何修复它。

有什么想法吗？

请不要使用JQuery。

https://jsfiddle.net/1rvz3696/

- Dgameman1

---

你可以创建JSFiddle或Plunker吗？ - brk

我不理解问题所在。我尝试了你的jsfiddle：我输入了“hello foobar”。我选择了一个单词并按下shift键。然后这个单词以大写字母的形式出现在输入框前面。这其中哪些是不期望的行为？ - owler

@ILovephp123 我还是不明白...你的fiddle对我来说很好用，或者我真的还是不明白。 - choz

@choz 目标是替换所选文本，而不是在其他地方添加它。 - Dgameman1

@ILovephp123 所以，如果我输入 'abc' 并选择它，然后按下 shift，我应该将 abc 更改为另一个单词吗？或者... - choz

Answer 1

您需要使 textarea 元素替换其中的值。这是您的 replaceSelectedText 函数应该如下所示：

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);
  }
}

以下是Fiddle示例。

如果没有特定的id，您可以将txtArea替换为以下内容。

var txtArea = document.activeElement;

还有另一个Fiddle

- choz

---

但是如果没有特定的ID，我希望它可以在任何人可以放置文本的地方使用。 - Dgameman1