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上にいるときに特定のキーを押すと、テキストが変更されたように見えますが、Enterキーを押すと、元のテキストに戻ります。

私はこの問題が機能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