How to replace the text in textarea?

Question

I need to display a div inside text area below selected text.

Javascript:

function getSel() {
    var txtarea = document.getElementById("mytextarea");
    var start = txtarea.selectionStart;
    var finish = txtarea.selectionEnd;
    var allText = txtarea.value;
    var sel = "****";
    var newText = 
        allText.substring(0, start) + sel + allText.substring(finish, allText.length);
    txtarea.value = newText;
}
$(document).ready(function () {
    $('#newpost').hide();
    $('#mytextarea').on('select', function () {
        $('#newpost').show();
    });
});

Here is my plunker

my requirement is to replace the text with stars,on selection of text in textarea the div with "***" must be shown below the selected text and after clicking on stars the text must be replaced with stars and div must be hidden utill the text is selected.

Thanks in Advance.

Can't understand your requirement. Could you explain it more clearly? — trgiangvp3, Jan 25 '18 at 07:08
@trgiangvp3 when I select some text in text area,I need to display stars below that text,so on slection of stars the selected text must be change to stars. — pbsbr, Jan 25 '18 at 07:10
What if your text inside text area is too long and must be displayed in multi-lines? How do you want to display the stars characters when you select the text? — trgiangvp3, Jan 25 '18 at 07:14
@trgiangvp3 Actually only some text is selected,not the entire text,the selected text must be replaced with stars.The stars must take count of selected text. — pbsbr, Jan 25 '18 at 07:17

Kirill Simonov · Accepted Answer · 2018-01-25T07:51:19.910

You can use position: fixed for your div and calculate it when you start the selection. And when the text is selected, use jQuery offset method to set its position:

function getSel() {
    // obtain the object reference for the textarea>
    var txtarea = document.getElementById("mytextarea");
    // obtain the index of the first selected character
    var start = txtarea.selectionStart;
    // obtain the index of the last selected character
    var finish = txtarea.selectionEnd;
    //obtain all Text
    var allText = txtarea.value;

    // obtain the selected text
    var sel = Array(finish - start + 1).join("*");
    //append te text;
    var newText = allText.substring(0, start) + sel + allText.substring(finish, allText.length);
    txtarea.value = newText;
    
    $('#newpost').offset({top: 0, left: 0}).hide();
}

$(document).ready(function () {
    var position;
    $('#newpost').hide();
    $('#mytextarea').on('select', function (e) {
        $('#newpost').offset(position).show();
        var txtarea = document.getElementById("mytextarea");
        var start = txtarea.selectionStart;
        var finish = txtarea.selectionEnd;
        $('#newpost p').text(Array(finish - start + 1).join("*"));
    }).on('mousedown', function(e) {
        position = {top: e.pageY - 5, left: e.pageX};
    });
});

#mytextarea {width: 300px; height: 100px; overflow:hidden}
#newpost{position:fixed}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <textArea id="mytextarea"></textArea>
  <div id="newpost">
    <p onclick="getSel()">***</p>
  </div>
</body>

Thanks.But here stars count must be same as selected text count. — pbsbr, Jan 25 '18 at 07:31
stars must be below selected text,they are getting some where else,how to chnage x and y position.So that they can position exactlly below selected text — pbsbr, Jan 25 '18 at 07:45
You can subtract a couple of pixels from `e.pageY` here: `position = {top: e.pageY - 10, left: e.pageX};`. Check the update — Kirill Simonov, Jan 25 '18 at 07:49

How to replace the text in textarea?

1 Answers1

Linked