1

I have a text area. The value of this text area is to keep updating using a loop. What I want is to select any portion of the text area and copy the selected text. But I cannot select the text since the textarea is keep updating. Please see the sample code below.

<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var x = 0;
            setInterval(function () {
                $('#txtData').append('Test value ' + x++ + '\n');
            }, 100);
        });
    </script>
</head>

<body>
    <div>
        <textarea id="txtData" style="width:200px;height:200px;overflow: auto;"></textarea>
    </div>
</body>

</html>

enter image description here

As in the above image. I want to select the text.

Can someone please help me with this issue.

Prabodha
  • 520
  • 1
  • 6
  • 19
  • I can select in Chrome – mplungjan Oct 02 '19 at 14:54
  • I just copied from the above running snippet and pasted in notepad it pasted me the selected text in notepad.... or can you elaborate the question? – Arvind Maurya Oct 02 '19 at 14:59
  • I just updated time out to 100ms, when the content is updating rapidly, unable to select any portion, once it selected it goes away. – Prabodha Oct 02 '19 at 15:05
  • @mplungjan, in firefox its not working. – Prabodha Oct 02 '19 at 15:06
  • This might be a FF-specific thing that you will need to work around. For example, is there a particular reason why you're using a textarea? If it doesn't need to be, you can style a div like a textarea (https://stackoverflow.com/a/8957518), change your append to $('#txtData').append('Test value ' + x++ + '
    ') and that should give you the same look but you'll be able to select while the loop keeps appending.     – Doug F Oct 02 '19 at 16:09
  • @Doug F, I tried that already and with the
    solution this works perfectly. But in my project there are large number of data are writing to the textarea. with the
    solution, when the data count becomes more, its getting stuck.
     – Prabodha Oct 03 '19 at 03:37
  • OK, I see what you mean. Have you tried using a multiselect dropdown menu? You would need to change your append to $('#txtData').append(''); but I just tested it out in Firefox and I have no problem selecting while the dropdown menu is populating, though I can't say for sure if you would have the same performance issues or not as you did when you tried earlier with the div. – Doug F Oct 03 '19 at 12:48

0 Answers0