Изменение выбранного текста через 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/

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