1

So I can append text to a textarea using this method

document.getElementById('myArea').value += msg;

This tacks the new input onto the end of the current input.

Suppose the textarea already contains text. Suppose also that using "=" instead of "+=" and inputting the values textarea already had along with the new ones is not a possible solution in this context

How would one input new text to this textarea on the correct line and in the correct position with respect to the text that is already in place?

Here is a YouTube video demonstrating the problem

https://www.youtube.com/watch?v=GpwEuI3_73I&feature=youtu.be

UPDATE: Instead of sending one letter at a time, I sent the whole textarea each time a key is pressed. Obviously more computationally taxing, but that's the only solution I have right now. I am still interested in hearing any better solutions if you have one!

PencilCrate
  • 211
  • 3
  • 13
  • Why using = is not possible? I can't imagine this scenario... – Anton Harald Apr 05 '16 at 17:00
  • Are you talking about cursor position ? – Rayon Apr 05 '16 at 17:01
  • @AntonHarald I'm using socket.io to submit one letter at a time in real-time as it's typed. To use "=" I would have to submit the entire page each time a letter is typed. The inefficiency would be just ridiculous. – PencilCrate Apr 05 '16 at 17:01
  • 3
    The thing is, that textare.value holds a string. If you are willing to insert something 'in between' some lines, you have to parse the string into lines (e.g. into an array), then add a line somewhere and transform it to a string again. – Anton Harald Apr 05 '16 at 17:02
  • what do you mean by correct line/position? – Anton Harald Apr 05 '16 at 17:03
  • I uploaded a video explaining. Please see the link I added to my question. – PencilCrate Apr 05 '16 at 17:10
  • you could try to go with the sort of "brute force" method first: Just send the whole textarea.value via socket and replace it at the other side. There might be a better solution. But I'd say that would perform quite well, of course - depending on the text size. – Anton Harald Apr 05 '16 at 17:20
  • Ok I'll give it a shot. I wonder how computationally taxing it would be to send a few paragraphs of plain text each time a letter is typed, as opposed to just that single letter? – PencilCrate Apr 05 '16 at 17:24
  • 1
    But I'd be curious to see someone posting a more sophisticated solution. Generally I'd argue, that it's rather the amount of text that you send via the socket that should be reduced. That can be a bottleneck. The insertion at the client side goes fast. – Anton Harald Apr 05 '16 at 17:25

2 Answers2

0

I'm assuming you send only the last character typed (as in your original approach), and it is stored in a variable named "newChar".

Take this as pseudo-code, although I hope it does not require many changes to actually work:

// deserialize the text of the target textearea
var txt = targetTextarea.text;
var txtAsArray = txt.split(/\r?\n/);
var txtLine = txtAsArray[cursorRowNum];

// write the new character in the right position (but in memory)
txtLine = txtLine.substr(0, cursorColNum) + newChar + txtLine.substr(cursorColNum);

// now serialize the text back and update the target textarea
txtAsArray[cursorRowNum] = txtLine;
txt = txtAsArray.join("\n");
targetTextarea.text = txt;

A reference used was: How in node to split string by newline ('\n')?

Regarding performance, there is no additional network activity here, and we are accessing the DOM only twice (first and last line). Remember than accessing the DOM is around 100 times slower than plain variables in memory as shown by http://www.phpied.com/dom-access-optimization/ .

That "txt = txtAsArray.join("\n");" might need to be "txt = txtAsArray.join("\r\n");" on Windows. Detecting if you are in one or the other is explained at How to find the operating system version using JavaScript as pointed by Angel Joseph Piscola.

Community
  • 1
  • 1
another_sam
  • 1
  • 2
  • What happens if the user deletes text from the text box or adds a new line, copy and pasts-something? – Anton Harald Apr 05 '16 at 18:14
  • [How to find the operating system using javascript](http://stackoverflow.com/questions/9514179/how-to-find-the-operating-system-version-using-javascript) – Angel Joseph Piscola Apr 05 '16 at 18:16
  • @AntonHarald I doubt it works in those cases without further enhancements. Here I'm just answering the original author's question as stated at https://www.youtube.com/watch?v=GpwEuI3_73I#t=0m44s – another_sam Apr 05 '16 at 18:20
-2

Hi this will add text to existing text in textarea i have try that 

 var msg = "Hi How are you ?";
    document.getElementById('myArea').value += msg;
Hitesh Dabhi
  • 108
  • 12