Support tabs for indentation 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="2018-07-25T08:15:17.047" class="fromnow">Jul 25 '18 at 08:15</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2018-07-25T09:22:51.133" datetime="2018-07-25T09:22:51.133">Jul 25 '18 at 09:22</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 1,513 times"> <span class="fc-light mr2">Viewed</span> 1,513 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="51514002" data-ownerid="9593885" data-score="0"> <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="51514002"> <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> <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 am aware this question has been asked before (<a href="../../questions/6637341/use-tab-to-indent-in-textarea">Use tab to indent in textarea</a>), but the answers provided did not fix my problem. My code is as follows:</p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="lang-js prettyprint-override snippet-code-js s-code-block"><code>$(document).ready(() => { document.getElementById('input').onkeydown = e => { if (e.keyCode == 9 || e.which == 9) { e.preventDefault(); var s = this.selectionStart; this.value = this.value.substring(0, this.selectionStart) + "\t" + this.value.substring(this.selectionEnd); this.selectionEnd = s + 1; } } /* This jQuery solution doesn't work, either $('#input').keydown(e => { var keyCode = e.keyCode || e.which; if (keyCode == 9) { e.preventDefault(); var start = this.selectionStart; var end = this.selectionEnd; // set textarea value to: text before caret + tab + text after caret $(this).val($(this).val().substring(0, start) + "\t" + $(this).val().substring(end)); // put caret at right position again this.selectionStart = this.selectionEnd = start + 1; } }); / });</code></pre> <pre class="lang-html prettyprint-override snippet-code-html s-code-block"><code><!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> </script> </head> <body> <textarea id="input"></textarea> </body> </html></code></pre> </div> </div> <p>Browser is Google Chrome 67 on a Mac.</p></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/jquery" class="post-tag js-gps-track" title="show questions tagged 'jquery'" rel="tag">jquery</a> <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 Jul 25 '18 at 09:22">edited Jul 25 '18 at 09:22</time> <a href="../../users/1981644/ullas-hunka" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1981644.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Ullas Hunka" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/1981644/ullas-hunka" class="s-user-card--link">Ullas Hunka</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,939</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="12 silver badge">12</li> <li class="s-award-bling s-award-blingbronze" title="26 bronze badge">26</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 Jul 25 '18 at 08:15">asked Jul 25 '18 at 08:15</time> <a href="../../users/9593885/lucca" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/9593885.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Lucca" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/9593885/lucca" class="s-user-card--link">Lucca</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">129</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badge">1</li> <li class="s-award-bling s-award-blingbronze" title="7 bronze badge">7</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </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="51514073"></a> <div id="answer-51514073" class="answer accepted-answer" data-answerid="51514073" data-ownerid="519413" data-score="2" 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="51514073"> <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="2">2</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>The issue is solely caused by your use of arrow functions, which are affecting the scope the logic runs under. Hence <code>this</code> is the <code>window</code>, not the <code>textarea</code> which raised the event. Use traditional anonymous functions and your code works fine - and is also now supported by all versions of IE.</p> <p>Also note that as you're using jQuery already you may as well use it to attach unobtrusive event handlers and for its succinct methods for amending form control values. Try 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="lang-js prettyprint-override snippet-code-js s-code-block"><code>$(function() { $('#input').on('keydown', function(e) { if (e.keyCode == 9 || e.which == 9) { e.preventDefault(); var s = this.selectionStart; $(this).val(function(i, v) { return v.substring(0, s) + "\t" + v.substring(this.selectionEnd) }); this.selectionEnd = s + 1; } }); });</code></pre> <pre class="lang-html prettyprint-override snippet-code-html s-code-block"><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea id="input"></textarea></code></pre> </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="user-info "> <div class="user-action-time">edited <span title="2018-07-25T08:24:15.860" class="relativetime">Jul 25 '18 at 08:24</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">Rory McCrossan</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 Jul 25 '18 at 08:19">answered Jul 25 '18 at 08:19</time> <a href="../../users/519413/rory-mccrossan" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/519413.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Rory McCrossan" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/519413/rory-mccrossan" class="s-user-card--link">Rory McCrossan</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">306,214</li> <li class="s-award-bling s-award-blinggold" title="37 gold badges">37</li> <li class="s-award-bling s-award-blingsilver" title="269 silver badges">269</li> <li class="s-award-bling s-award-bling__bronze" title="303 bronze badges">303</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-51514073" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="51514073" 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-89996990" class="comment js-comment " data-comment-id="89996990" data-comment-owner-id="9593885" 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="comment89996990_51514073"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Thanks, but can the indent width be changed? Although StackOverflow's "run code snippet" displays a width of 4, it has a width of 8 when I actually run the code. Edit: Replacing `"\t"` with 4 spaces didn't work.</span> – <a href="../../users/9593885/lucca" title="129 reputation" class="comment-user owner">Lucca</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/51514002/support-tabs-for-indentation-in-textarea#comment89996990_51514073"><span title="2018-07-25T08:34:03.223 License: CC BY-SA 4.0" class="relativetime-clean">Jul 25 '18 at 08:34</span></a></span> </div> </div> </li> <li id="comment-89997064" class="comment js-comment " data-comment-id="89997064" data-comment-owner-id="519413" 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="comment89997064_51514073"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Sure, you could insert N number of spaces instead of a single tab.</span> – <a href="../../users/519413/rory-mccrossan" title="306,214 reputation" class="comment-user ">Rory McCrossan</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/51514002/support-tabs-for-indentation-in-textarea#comment89997064_51514073"><span title="2018-07-25T08:35:42.477 License: CC BY-SA 4.0" class="relativetime-clean">Jul 25 '18 at 08:35</span></a></span> </div> </div> </li> <li id="comment-89997205" class="comment js-comment " data-comment-id="89997205" data-comment-owner-id="9593885" 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="comment89997205_51514073"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">please see the edit</span> – <a href="../../users/9593885/lucca" title="129 reputation" class="comment-user owner">Lucca</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/51514002/support-tabs-for-indentation-in-textarea#comment89997205_51514073"><span title="2018-07-25T08:39:19.990 License: CC BY-SA 4.0" class="relativetime-clean">Jul 25 '18 at 08:39</span></a></span> </div> </div> </li> <li id="comment-89997233" class="comment js-comment " data-comment-id="89997233" data-comment-owner-id="519413" 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="comment89997233_51514073"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I see no edits...?</span> – <a href="../../users/519413/rory-mccrossan" title="306,214 reputation" class="comment-user ">Rory McCrossan</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/51514002/support-tabs-for-indentation-in-textarea#comment89997233_51514073"><span title="2018-07-25T08:40:13.607 License: CC BY-SA 4.0" class="relativetime-clean">Jul 25 '18 at 08:40</span></a></span> </div> </div> </li> <li id="comment-89997380" class="comment js-comment " data-comment-id="89997380" data-comment-owner-id="9593885" 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="comment89997380_51514073"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I added "Replacing `"\t"` with 4 spaces didn't work" to the comment above. Anyway, only a single space is added to the textarea instead of 4.</span> – <a href="../../users/9593885/lucca" title="129 reputation" class="comment-user owner">Lucca</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/51514002/support-tabs-for-indentation-in-textarea#comment89997380_51514073"><span title="2018-07-25T08:44:10.667 License: CC BY-SA 4.0" class="relativetime-clean">Jul 25 '18 at 08:44</span></a></span> </div> </div> </li> <li id="comment-89997438" class="comment js-comment " data-comment-id="89997438" data-comment-owner-id="519413" 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="comment89997438_51514073"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I'd suggest starting a new question about it then, as the issue your original question was about (the code not working at all) has been solved.</span> – <a href="../../users/519413/rory-mccrossan" title="306,214 reputation" class="comment-user ">Rory McCrossan</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/51514002/support-tabs-for-indentation-in-textarea#comment89997438_51514073"><span title="2018-07-25T08:46:00.760 License: CC BY-SA 4.0" class="relativetime-clean">Jul 25 '18 at 08:46</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script> / replace <time class="fromnow" /> with human delta between `datetime` attr and now */ document.addEventListener('DOMContentLoaded', function(){ var time_elements = document.querySelectorAll("time.fromnow"); for (var i=0; i<time_elements.length; i++) { time_elements[i].innerHTML = moment(time_elements[i].getAttribute("datetime")).fromNow(); } }); </script> </body> </html>