I am not sure whether users will appreciate the editing experience if the cursor jumps between <div> elements while they type, even taking words with it that become too long for the previous <div>.

It would be much simpler if you separated the input control (where users type or paste their text) from the output controls (the 274-character fields). Then you can simply split the whole input into 274-character chunks after every change.

function split() { for (let i, j = 1, text = document.querySelector("textarea").value.replace(/\s/g, " ") + " "; i !== -1; j++) { const tweet = document.getElementById("t" + j); if (!tweet) break; i = text.lastIndexOf(" ", 274); if (i === -1) tweet.value = text; else { tweet.value = text.substring(0, i); text = text.substring(i + 1); } } }

<textarea onkeyup="split()"></textarea> <input id="t1" size="274" readonly><br> <input id="t2" size="274" readonly><br> <input id="t3" size="274" readonly>

Does this meet your requirements?

Noteworthy points:

• All whitespace in the input is converted into spaces.
• An additional space is appended to the end of the input. Without that, a short input consisting of "two words" would be split into two tweets, although it fits into one.

I am not sure whether users will appreciate the editing experience if the cursor jumps between <div> elements while they type, even taking words with it that become too long for the previous <div>.

It would be much simpler if you separated the input control (where users type or paste their text) from the output controls (the 274-character fields). Then you can simply split the whole input into 274-character chunks after every change.

function split() { for (let i, j = 1, text = document.querySelector("textarea").value.replace(/\s/g, " ") + " "; ; j++) { const tweet = document.getElementById("t" + j); if (!tweet) break; i = text.lastIndexOf(" ", 274); if (i === -1) {  tweet.value = text.substring(0, 274); text = text.substring(274);   } else { tweet.value = text.substring(0, i); text = text.substring(i + 1); } } }

<textarea onkeyup="split()"></textarea> <input id="t1" size="274" readonly><br> <input id="t2" size="274" readonly><br> <input id="t3" size="274" readonly>

Does this meet your requirements?

Noteworthy points:

• All whitespace in the input is converted into spaces.
• An additional space is appended to the end of the input. Without that, a short input consisting of "two words" would be split into two tweets, although it fits into one.
• If there is no space among the next 274 characters, the overlong word is cut off after 274 characters.
• The for loop runs over all output controls, even if text has already been reduced to the empty string. This clears tweets that are no longer needed because the input has become shorter.