Scroll to cursor when textarea rows become less in javascript

Question

I want the textarea to scroll to cursor once the row number has been changed.

Sometimes when I change the row number reducing it the cursor goes out of view

How do I make it so that the cursor stays in view?

startPos = ta.selectionStart; 
const endPos = ta.selectionEnd; 
newText = ""; 
ta.blur();
ta.focus();
ta.setRangeText(newText, startPos, endPos, 'end');
ta.rows = "6";

Context:

The textarea is originally 26 rows big, I resize it using javascript onfocus event to 6 rows. However, when the cursor is in a position that is somewhere over 6 rows when I resize it is not shown unless I manually scroll to it.

https://jsfiddle.net/wphdq09k/

Want to share code which you have tried. – Shail_bee Dec 29 '20 at 06:56 — Shail_bee, Dec 29 '20 at 06:56
@Shail_bee I have added the code that I have tried. – nigel mhizha Dec 29 '20 at 11:17 — nigel mhizha, Dec 29 '20 at 11:17

score 0 · Answer 1 · answered Dec 30 '20 at 16:24

I managed to do this by customising the jsfiddle on this answer https://stackoverflow.com/a/40951875/10801626

const index = ta.selectionStart; //instead of getting the indexOf as shown in the link shared above, I get the selectStart
ta.selectionStart = ta.selectionEnd = index;
ta.blur();
ta.focus();
ta.selectionStart = index;
ta.selectoonEnd = index; //I also customised this line removing the "Hello World".length

Hopefully this can help someone else too.

Scroll to cursor when textarea rows become less in javascript

1 Answers1