Preserve cursor position in javascript

Question

I have an app that corrects the text.

window.addEventListener("keydown", function(e) {
            if (e.code == "Space") {                
                format();
            }
        }, true);

The format function is one that parses the value of textarea, highlight errors and returns the HTML of the formatted area.

function format() {
      data = {
        paragraphs: 0,
        sentences: 0,
        words: 0,
        hardSentences: 0,
        veryHardSentences: 0,
        adverbs: 0,
        passiveVoice: 0,
        complex: 0
      };

      ("use strict");     

      var text = document.querySelector('div[contenteditable][aria-label="Message Body"]').innerText;
      console.log("this is text " + text)
      let paragraphs = text.split("\n");
      let hardSentences = paragraphs.map(p => getDifficultSentences(p));
      let inP = hardSentences.map(para => `<div>${para}</div>`);
      data.paragraphs = paragraphs.length;
      OutputText = inP.join("");
      return (composeView.setBodyHTML(OutputText))
      }

I want to invoke the format() function each time the users writes a new word, hence I use to spacebar to implement that behavior.

What happens is that after I invoke the format function, the cursors go at the beginning of the textarea.

What's the best way to preserve the cursor position always at the end of the textarea (without jQuery)?

@Mirakurun majority of the work is done by getDifficultSentences() that call lots of other internal utilities. — leonardofed, Jan 02 '19 at 12:33
Try this. https://stackoverflow.com/questions/4233265/contenteditable-set-caret-at-the-end-of-the-text-cross-browser — AKT, Jan 02 '19 at 13:06
Also, I think you should use composeView.getBodyElement() and composeView.getTextContent(). There might be multiple compose windows open. — AKT, Jan 02 '19 at 13:10
https://stackoverflow.com/questions/7790725/javascript-track-mouse-position — sferret, Jan 02 '19 at 16:44
@AKT the problem with composeView.getTextContent() is that it returns a string with the text but I lose the formatting. Ie. if the user wrote "Hi, \n \n I'm the user", what getTextContent() returns is "Hi, I'm the user" — leonardofed, Jan 03 '19 at 23:05
@AKT ideas on how to workaround this problem other than using the querySelector? — leonardofed, Jan 03 '19 at 23:05

Preserve cursor position in javascript

0 Answers0