Insert text into a when a button is clicked, where the cursor was positioned</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="2013-07-10T09:02:36.353" class="fromnow">Jul 10 '13 at 09:02</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2013-07-10T09:11:00.373" datetime="2013-07-10T09:11:00.373">Jul 10 '13 at 09:11</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 1,623 times"> <span class="fc-light mr2">Viewed</span> 1,623 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="17566490" data-ownerid="567059" data-score="3"> <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="17566490"> <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="3">3</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 a <code><textarea></code> with several buttons underneath it, and the purpose of these buttons is to insert certain text in to the <code><textarea></code>.</p> <p>The below code will always insert the desired text at the beginning of the <code><textarea></code>, which is fine if it didn't have focus when the button was clicked. However, if the <code><textarea></code> did have focus, I'd like to insert the text where the cursor was when a button is clicked.</p> <p>Here is my code so far. If anyone can suggest how I would need to do this, I'd be very grateful. Thanks.</p> <pre><code>jQuery(document).ready(function(){ var button_text = {} // The text to insert for each button click button_text['insert_event_name'] = 'event_name'; button_text['insert_event_date'] = 'event_date'; button_text['insert_event_start_time'] = 'event_start'; button_text['insert_event_finish_time'] = 'event_finish'; button_text['insert_event_location'] = 'event_location'; button_text['insert_event_address'] = 'event_address'; jQuery('.inserter', '#event-desc-container').on('click', function(){ var button = jQuery(this).attr('name'); var text = '['+button_text[button]+']'; textarea = jQuery('textarea#event_desc', '#event-desc-container'); desc = textarea.val() textarea.val(text+desc); }); }); </code></pre></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/cursor" class="post-tag js-gps-track" title="show questions tagged 'cursor'" rel="tag">cursor</a> <a href="../../questions/tagged/textarea" class="post-tag js-gps-track" title="show questions tagged 'textarea'" rel="tag">textarea</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 owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jul 10 '13 at 09:02">asked Jul 10 '13 at 09:02</time> <a href="../../users/567059/david-gard" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/567059.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="David Gard" /> </a> <div class="s-user-card--info"> <a href="../../users/567059/david-gard" class="s-user-card--link">David Gard</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">11,225</li> <li class="s-award-bling s-award-blinggold" title="36 gold badges">36</li> <li class="s-award-bling s-award-blingsilver" title="115 silver badges">115</li> <li class="s-award-bling s-award-blingbronze" title="227 bronze badges">227</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-17566490" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="17566490" 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-25557340" class="comment js-comment " data-comment-id="25557340" data-comment-owner-id="96100" 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="comment25557340_17566490"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">http://stackoverflow.com/questions/3308292/inserting-text-at-cursor-in-a-textarea-with-javascript/3308539#3308539</span> – <a href="../../users/96100/tim-down" title="318,141 reputation" class="comment-user ">Tim Down</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/17566490/insert-text-into-a-textarea-when-a-button-is-clicked-where-the-cursor-was-posi#comment25557340_17566490"><span title="2013-07-10T09:25:53.527 License: CC BY-SA 3.0" class="relativetime-clean">Jul 10 '13 at 09:25</span></a></span> </div> </div> </li> <li id="comment-25560465" class="comment js-comment " data-comment-id="25560465" data-comment-owner-id="567059" 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="comment25560465_17566490"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Doesn't work, because as soon as I press a button, the textarea loses focus, and therefore `selectionStart`, `selectionEnd`, etc. are all `undefinded`. Thanks.</span> – <a href="../../users/567059/david-gard" title="11,225 reputation" class="comment-user owner">David Gard</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/17566490/insert-text-into-a-textarea-when-a-button-is-clicked-where-the-cursor-was-posi#comment25560465_17566490"><span title="2013-07-10T11:00:05.420 License: CC BY-SA 3.0" class="relativetime-clean">Jul 10 '13 at 11:00</span></a></span> </div> </div> </li> <li id="comment-25561730" class="comment js-comment " data-comment-id="25561730" data-comment-owner-id="96100" 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="comment25561730_17566490"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Yes, so you need to work out how to prevent that. Calling `focus()` on the textarea and calling `preventDefault()` on the `click` event will work in most browsers. Adding `unselectable="on"` will make it work in IE. Alternatively, use the `mousedown` event instead.</span> – <a href="../../users/96100/tim-down" title="318,141 reputation" class="comment-user ">Tim Down</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/17566490/insert-text-into-a-textarea-when-a-button-is-clicked-where-the-cursor-was-posi#comment25561730_17566490"><span title="2013-07-10T11:37:26.763 License: CC BY-SA 3.0" class="relativetime-clean">Jul 10 '13 at 11:37</span></a></span> </div> </div> </li> <li id="comment-25561749" class="comment js-comment " data-comment-id="25561749" data-comment-owner-id="96100" 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="comment25561749_17566490"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">http://stackoverflow.com/questions/7469420/how-to-append-text-in-textarea-at-cursor-location-using-javascript</span> – <a href="../../users/96100/tim-down" title="318,141 reputation" class="comment-user ">Tim Down</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/17566490/insert-text-into-a-textarea-when-a-button-is-clicked-where-the-cursor-was-posi#comment25561749_17566490"><span title="2013-07-10T11:38:14.703 License: CC BY-SA 3.0" class="relativetime-clean">Jul 10 '13 at 11:38</span></a></span> </div> </div> </li> <li id="comment-25561916" class="comment js-comment " data-comment-id="25561916" data-comment-owner-id="567059" 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="comment25561916_17566490"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Tim, that's that basis of this question - I don't know how to prevent that! Any way, it's resolved now. Thanks.</span> – <a href="../../users/567059/david-gard" title="11,225 reputation" class="comment-user owner">David Gard</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/17566490/insert-text-into-a-textarea-when-a-button-is-clicked-where-the-cursor-was-posi#comment25561916_17566490"><span title="2013-07-10T11:43:03.770 License: CC BY-SA 3.0" class="relativetime-clean">Jul 10 '13 at 11:43</span></a></span> </div> </div> </li> <li id="comment-25565043" class="comment js-comment " data-comment-id="25565043" data-comment-owner-id="96100" 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="comment25565043_17566490"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">It's a simple fix that I would think is better to try to understand than to throw jQuery plug-ins at.</span> – <a href="../../users/96100/tim-down" title="318,141 reputation" class="comment-user ">Tim Down</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/17566490/insert-text-into-a-textarea-when-a-button-is-clicked-where-the-cursor-was-posi#comment25565043_17566490"><span title="2013-07-10T13:10:07.933 License: CC BY-SA 3.0" class="relativetime-clean">Jul 10 '13 at 13:10</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">1 Answers<span style="display:none;" itemprop="answerCount">1</span></h2> </div> </div> </div> <a name="17566673"></a> <div id="answer-17566673" class="answer accepted-answer" data-answerid="17566673" data-ownerid="2023066" data-score="5" itemprop="acceptedAnswer" 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="17566673"> <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="5">5</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Can be easily done with this jQuery plugin: <a class="external-link" href="http://dwieeb.github.io/jquery-textrange/" rel="noreferrer">http://dwieeb.github.io/jquery-textrange/</a></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="answered Jul 10 '13 at 09:11">answered Jul 10 '13 at 09:11</time> <a href="../../users/2023066/grmmph" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2023066.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="grmmph" /> </a> <div class="s-user-card--info"> <a href="../../users/2023066/grmmph" class="s-user-card--link">grmmph</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">781</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="8 silver badges">8</li> <li class="s-award-bling s-award-bling__bronze" title="17 bronze badges">17</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-17566673" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="17566673" 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-25560387" class="comment js-comment " data-comment-id="25560387" data-comment-owner-id="567059" 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="comment25560387_17566673"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Doesn't work. No matter how you use it you get the error `invalid 'in' operand` on line 190 (Firefox 22.0). Thanks.</span> – <a href="../../users/567059/david-gard" title="11,225 reputation" class="comment-user owner">David Gard</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/17566490/insert-text-into-a-textarea-when-a-button-is-clicked-where-the-cursor-was-posi#comment25560387_17566673"><span title="2013-07-10T10:57:49.283 License: CC BY-SA 3.0" class="relativetime-clean">Jul 10 '13 at 10:57</span></a></span> </div> </div> </li> <li id="comment-25560664" class="comment js-comment " data-comment-id="25560664" data-comment-owner-id="2023066" 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="comment25560664_17566673"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Strange. Have you tried the demo.html. If I understood correctly that's exactly what you are looking for.</span> – <a href="../../users/2023066/grmmph" title="781 reputation" class="comment-user ">grmmph</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/17566490/insert-text-into-a-textarea-when-a-button-is-clicked-where-the-cursor-was-posi#comment25560664_17566673"><span title="2013-07-10T11:05:59.393 License: CC BY-SA 3.0" class="relativetime-clean">Jul 10 '13 at 11:05</span></a></span> </div> </div> </li> <li id="comment-25560836" class="comment js-comment " data-comment-id="25560836" data-comment-owner-id="567059" 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="comment25560836_17566673"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I take my comment back, it was my coding error. Got it working fine now, and it does just what I'm after (with two lines of code!). Thanks for the tip.</span> – <a href="../../users/567059/david-gard" title="11,225 reputation" class="comment-user owner">David Gard</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/17566490/insert-text-into-a-textarea-when-a-button-is-clicked-where-the-cursor-was-posi#comment25560836_17566673"><span title="2013-07-10T11:11:28.967 License: CC BY-SA 3.0" class="relativetime-clean">Jul 10 '13 at 11:11</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>