how to i assign text direction RTL for window.getSelection value, I tried but how to remove getSelection from existing value of text area

Question

var F1 = document.getElementById('samuText').value;
 
function insertAtCursor() 
{
 if (window.getSelection)
 {
     sel = window.getSelection();
       document.getElementById('samuText').value = F1+sel // here i need to remove selected value from F1
   //alert(sel);
      //ocument.getElementById(sel).style.direction = "rtl";
      
 }
}

<textarea id="samuText">Samudrala Ramu</textarea><button onclick="insertAtCursor();">RLM</button>

Are you wanting to style the `` or display the text in something else from the `textarea`? You are trying to style something with the `id` of the text selection which doesn't exist, hence the console error. Think.... `alert(sel);` will output the text selection.... you are using that to target an element by id of that selection which doesn't exist hence this not working. — NewToJS, Jun 22 '18 at 05:25
I want to change the selection text style direction Right to left in that text area, If Selected Samudrala From Samudrala Ramu, Then I clicks on RLM after that , The Value Should be as Ramu Samudrala in that Textarea. — Samudrala Ramu, Jun 22 '18 at 05:28
What is the desired output for only selecting `Samu`? You should provide some example input and output. — Sangbok Lee, Jun 22 '18 at 06:02
If you selected Samu from Samudrala Ramu then output should be "drala RamuSamu" — Samudrala Ramu, Jun 22 '18 at 06:23
now i want to get the starting point of getSelection and need to remove that selection charecter length from default string value of text area, But How can I do that?, any body give me an idea. — Samudrala Ramu, Jun 22 '18 at 06:59

score 0 · Answer 1 · answered Jun 22 '18 at 08:24

Okay you should be able to get the selected text and its index(text position). I searched and didn't find any solutions to get the text position from <textarea>. But this answer provided a way to get the text position from <div>. And you can make <div> look like <textarea>. I combined those two answers and slightly modified. Note that changeValue function is the key for manipulating text.

<html>
<style>
#main {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}
</style>

<body>
<div id="main" contenteditable>Samudrala RamuSamu</div>
<input type="button" onclick="changeValue()" unselectable="on" value="Get selection">
</body>

<script>
function getSelectionCharOffsetsWithin(element) {
    var start = 0, end = 0;
    var sel, range, priorRange;
    if (typeof window.getSelection != "undefined") {
        range = window.getSelection().getRangeAt(0);
        priorRange = range.cloneRange();
        priorRange.selectNodeContents(element);
        priorRange.setEnd(range.startContainer, range.startOffset);
        start = priorRange.toString().length;
        end = start + range.toString().length;
    } else if (typeof document.selection != "undefined" &&
            (sel = document.selection).type != "Control") {
        range = sel.createRange();
        priorRange = document.body.createTextRange();
        priorRange.moveToElementText(element);
        priorRange.setEndPoint("EndToStart", range);
        start = priorRange.text.length;
        end = start + range.text.length;
    }
    return {
        start: start,
        end: end,
        value: range.toString()
    };
}

function changeValue() {
    var mainDiv = document.getElementById("main");
    var sel = getSelectionCharOffsetsWithin(mainDiv);

    var mainValue = mainDiv.textContent;
    var newValue = mainValue.slice(0,sel.start) + mainValue.slice(sel.end) + sel.value;
    mainDiv.textContent = newValue;
}
</script>

</html>

how to i assign text direction RTL for window.getSelection value, I tried but how to remove getSelection from existing value of text area

1 Answers1