Place cursor at the 2nd line of a textarea with jQuery/JavaScript

Question

I have a blank textarea.

When the user clicks on this textarea for the first time, some text is pre-filled:

Dear sir,

Best regards,
John Smith|

...and the cursor goes at the end by default. I want the cursor to be instantly placed where it belongs:

Dear sir,
|
Best regards,
John Smith

So basically, I am looking for a way to move the cursor at the 2nd line immediately and automatically, regardless of the amount of characters in the 1st line.

Is this magic or is it possible?

Thanks and stay safe :)

Does this answer your question? [Set keyboard caret position in html textbox](https://stackoverflow.com/questions/512528/set-keyboard-caret-position-in-html-textbox) — computercarguy, Oct 16 '20 at 16:19
That answer hasn't aged well: as of 2016 [everything](https://caniuse.com/input-selection) supports setSelectionRange, and there hasn't been a need for `onload` shenanigans since the `defer` attribute gained universal support back in 2012 — Mike 'Pomax' Kamermans, Oct 16 '20 at 16:30
@Mike'Pomax'Kamermans So add an updated answer to the duplicate. That's the appropriate response, not creating another duplicate. — Heretic Monkey, Oct 16 '20 at 17:42
That's not anyone's role - I've left a comment already, and it's up to the person who wrote that answer to figure out how best to update it. Answers that _used_ to be the correct answer in the past and would have been appropriate dupes over a decade ago are 100% allowed to stop being appropriate posts because they're no longer true. Writing a new answer is perfectly appropriate in those cases. — Mike 'Pomax' Kamermans, Oct 16 '20 at 17:57
Answers are not dupes. Questions are dupes. And this question is a duplicate of that older question. You're absolutely correct that answers can certainly stop being appropriate as time marches on, which is why experts can add new, better answers, which are then voted up and eventually supplant the older, less efficient answers. One might even say that was the whole idea behind SO (in the beginning, anyway). — Heretic Monkey, Oct 16 '20 at 20:31
Unfortunately, that logic breaks down at the "which are then upvoted" assumption. Ideally they would be, but in reality people don't look at alternative answers that only have one or two votes for questions from a decade ago if the (now wrong) accepted answer has hundreds of votes on it. As such, answering _this_ question with a modern, correct answer is far more valuable to both the poster of this question, _and_ future visitors. — Mike 'Pomax' Kamermans, Oct 16 '20 at 22:30

score 3 · Accepted Answer · answered Oct 16 '20 at 16:19

Why would there be any magic? This is what setSelectionRange is for. Just remember that you won't see the cursor unless you're focussed on the textarea, and if you do so by clicking on it, you're also automatically placing the cursor wherever you clicked:

let text = document.querySelector(`textarea`);
let pos = text.textContent.indexOf(`\n`);
text.setSelectionRange(pos+1, pos+1);
text.focus();

<textarea cols="20" rows="4">
Dear sir,

Best regards,
John Smith  
</textarea>

A Haworth · Answer 2 · 2020-10-16T17:04:24.733

-1

If you add your top text first, then remember the position of the cursor, then add the bottom text then reposition the cursor you won’t have to calculate lengths of a string or rely on the top string ending in the first newline, you can change the Dear Sir text e.g.to include address or other text and it will adjust automatically.

<textarea id="textarea" rows="8" cols="50"></textarea>
<script>
let textarea=document.getElementById("textarea");
    textarea.focus();
    textarea.innerHTML='Dear Sir,\n'
    let pos=textarea.selectionStart;
    textarea.innerHTML = 'Dear Sir,\n\nBest regards,\nJohn Smith';
    textarea.selectionStart=pos;
    textarea.selectionEnd=pos;
</script>

edited Oct 16 '20 at 17:04

answered Oct 16 '20 at 16:48

A Haworth

30,908
4
11
14

I haven't downvoted you, but your snippet does not work in Chrome. – Rory McCrossan Oct 16 '20 at 19:22
Thanks for letting me know. it’s working in Chrome and Safari on IOS. I’ll try it on other systems. – A Haworth Oct 16 '20 at 19:36
@RoryMcCrossan - it's also working for me on Edge, Chrome and Firefox on Windows 10. Could you let me know which system you are using so I can track this down? Many thanks. – A Haworth Oct 16 '20 at 19:48
I'm using Chrome 86 on win10 – Rory McCrossan Oct 16 '20 at 19:49
@RoryMcCrossan thanks, yes I'm using Chrome 86 on Windows 10 too (and on IOS) and the snippet is working. Hmm, not sure what to do about that but will keep investigating and will keep the answer up here in case someone finds the problem. Many thanks for your help. – A Haworth Oct 17 '20 at 09:03

Place cursor at the 2nd line of a textarea with jQuery/JavaScript

2 Answers2