Position of Cursor in </a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2017-03-06T13:43:52.837" class="fromnow">Mar 06 '17 at 13:43</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2017-04-04T08:09:14.593" datetime="2017-04-04T08:09:14.593">Apr 04 '17 at 08:09</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 637 times"> <span class="fc-light mr2">Viewed</span> 637 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="42627210" data-ownerid="1541165" data-score="1"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="42627210"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I have code like this...</p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><textarea name="message" id="body" rows="15" cols="45"> In reply to: Hi there. Did you get my message? </textarea></code></pre> </div> </div> <p>I'd like the cursor to be automatically positioned in the upper left corner, but because of the space/text between the <code><textarea></code> tags, it gets positioned in the bottom-ish right.</p> <p>Is there some javascript or something that can force the cursor to be where I want it?</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Mar 06 '17 at 14:06">edited Mar 06 '17 at 14:06</time> <a href="../../users/4891666/andrew-bone" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4891666.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Andrew Bone" /> </a> <div class="s-user-card--info"> <a href="../../users/4891666/andrew-bone" class="s-user-card--link">Andrew Bone</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">7,092</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="18 silver badges">18</li> <li class="s-award-bling s-award-blingbronze" title="33 bronze badges">33</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Mar 06 '17 at 13:43">asked Mar 06 '17 at 13:43</time> <a href="../../users/1541165/gtilflm" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1541165.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="gtilflm" /> </a> <div class="s-user-card--info"> <a href="../../users/1541165/gtilflm" class="s-user-card--link">gtilflm</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,389</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="21 silver badge">21</li> <li class="s-award-bling s-award-blingbronze" title="51 bronze badge">51</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-42627210" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="42627210" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-73476271" class="comment js-comment " data-comment-id="73476271" data-comment-owner-id="1685346" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment73476271_42627210"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I think I've solved this, take a look at the updated answer.</span> – <a href="../../users/1685346/glaux" title="701 reputation" class="comment-user ">glaux</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/42627210/position-of-cursor-in-textarea#comment73476271_42627210"><span title="2017-04-04T08:41:42.547 License: CC BY-SA 3.0" class="relativetime-clean">Apr 04 '17 at 08:41</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">2 Answers<span style="display:none;" itemprop="answerCount">2</span></h2> </div> </div> </div> <a name="42627312"></a> <div id="answer-42627312" class="answer " data-answerid="42627312" data-ownerid="3656387" data-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="42627312"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><pre><code><script type="text/javascript"> var txtarea = document.getElementById("body"); txtarea.selectionEnd = 0; </script> </code></pre> <p>Edited: Try this:</p> <pre><code>$("#body").focus(function() { $(this).prop("selectionEnd", 0); }); </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2017-03-08T05:30:39.307" class="relativetime">Mar 08 '17 at 05:30</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Rahul Patel</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Mar 06 '17 at 13:48">answered Mar 06 '17 at 13:48</time> <a href="../../users/3656387/rahul-patel" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3656387.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Rahul Patel" /> </a> <div class="s-user-card--info"> <a href="../../users/3656387/rahul-patel" class="s-user-card--link">Rahul Patel</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">639</li> <li class="s-award-bling s-award-blingsilver" title="6 silver badges">6</li> <li class="s-award-bling s-award-blingbronze" title="12 bronze badges">12</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-42627312" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="42627312" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-72385261" class="comment js-comment " data-comment-id="72385261" data-comment-owner-id="1541165" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment72385261_42627312"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">This didn't work. The original question has been revised to be able to run the code snippet. If you "tab" to get into the text area, you'll notice that the cursor is positioned at the end.</span> – <a href="../../users/1541165/gtilflm" title="1,389 reputation" class="comment-user owner">gtilflm</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/42627210/position-of-cursor-in-textarea#comment72385261_42627312"><span title="2017-03-06T14:55:07.533 License: CC BY-SA 3.0" class="relativetime-clean">Mar 06 '17 at 14:55</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="42627400"></a> <div id="answer-42627400" class="answer " data-answerid="42627400" data-ownerid="1685346" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="42627400"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I've edited the whole answer. I think I understand your question correctly now and I have found a solution.</p> <p>The code works for me as is in Chrome and Opera, but not in Firefox, IE and Edge. I found <a href="../../questions/499126/jquery-set-cursor-position-in-text-area">this solution</a> on how to place the caret in any position in a textarea and now it works with your example in the browsers mentioned above (haven't tested IE below 11).</p> <p>Fiddle: <a class="external-link" href="https://jsfiddle.net/bume1up1/2/" rel="nofollow noreferrer">https://jsfiddle.net/bume1up1/2/</a></p> <p>The javascript I copied from the SO link above:</p> <pre><code>function setSelectionRange(input, selectionStart, selectionEnd) { if (input.setSelectionRange) { input.focus(); input.setSelectionRange(selectionStart, selectionEnd); } else if (input.createTextRange) { var range = input.createTextRange(); range.collapse(true); range.moveEnd('character', selectionEnd); range.moveStart('character', selectionStart); range.select(); } } function setCaretToPos (input, pos) { setSelectionRange(input, pos, pos); } setCaretToPos(document.getElementById("body"), 0); </code></pre> <p>In some browsers the textarea will be in focus by default, in Firefox you have to tab into the box, but the cursor position remains at the top.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited May 23 '17 at 12:25">edited May 23 '17 at 12:25</time> <a href="../../users/-1/community" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/-1.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Community" /> </a> <div class="s-user-card--info"> <a href="../../users/-1/community" class="s-user-card--link">Community</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badges">1</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Mar 06 '17 at 13:53">answered Mar 06 '17 at 13:53</time> <a href="../../users/1685346/glaux" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1685346.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="glaux" /> </a> <div class="s-user-card--info"> <a href="../../users/1685346/glaux" class="s-user-card--link">glaux</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">701</li> <li class="s-award-bling s-award-blingsilver" title="7 silver badges">7</li> <li class="s-award-bling s-award-blingbronze" title="20 bronze badges">20</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>