Use tab to indent in textarea

Question

I have a simple html textarea on my side   Right now if you click tab in it  it goes to the next field   I would like to make the tab button indent a few spaces instead   How can I do this  Thanks

User · Answer

If you really need tabs copy a tab from word or notepad and paste it in the text box where you want it

1 2 3

12 22 33

Unfortunately I think they remove the tabs from these comments though :) It will show as %09 in your POST or GET

User · Answer

The simplest way I found to do that in modern browsers with vanilla JavaScript is    x000D   x000D     lt textarea name  codebox  gt  lt  textarea gt  x000D     x000D     lt script gt  x000D    const codebox   document querySelector   name codebox    x000D   x000D    codebox addEventListener  keydown    e    gt    x000D      let   keyCode     e  x000D      let   value  selectionStart  selectionEnd     codebox  x000D   x000D      if  keyCode     9        TAB   9 x000D        e preventDefault    x000D   x000D        codebox value   value slice 0  selectionStart      t    value slice selectionEnd   x000D   x000D        codebox setSelectionRange selectionStart 2  selectionStart 2  x000D        x000D        x000D     lt  script gt  x000D   x000D   x000D    Note that I used many ES6 features in this snippet for the sake of simplicity  you ll probably want to transpile it  with Babel or TypeScript  before deploying it

User · Answer

I had to make a function to do the same  It is simple to use  just copy this code to your script and use  enableTab  HTMLElement   HTMLelement being something like document getElementById  id    The code is   function enableTab t  t onkeydown function t  if 9   t keyCode  var e this value n this selectionStart i this selectionEnd return this value e substring 0 n      e substring i  this selectionStart this selectionEnd n 1  1

User · Answer

Hold ALT and press 0 9 from numeric keypad   It works in google-chrome

User · Answer

var textareas   document getElementsByTagName  textarea    var count   textareas length  for var i 0 i lt count i         textareas i  onkeydown   function 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 solution does not require jQuery and will enable tab functionality on all textareas on a page

User · Answer

I see this subject is not solved  I coded this and it s working very well  It insert a tabulation at the cursor index  Without using jquery   lt textarea id  myArea  gt  lt  textarea gt   lt script gt  document getElementById  myArea   addEventListener  keydown  function event       if event code    Tab            var cIndex this selectionStart          this value  this value slice 0 cIndex    Slice at cursor index               t                                  Add Tab             this value slice cIndex   join       Join with the end         event stopPropagation            event preventDefault                     Don t quit the area         this selectionStart cIndex 1          this selectionEnd cIndex 1               Keep the cursor in the right index            lt  script gt

User · Answer

Here s my version of this  supports     tab   shift tab maintains undo stack for simple tab character inserts supports block line indent unindent but trashes undo stack properly selects whole lines when block indent unindent supports auto indent on pressing enter  maintains undo stack  use Escape key cancel support on next tab enter key  so you can press Escape then tab out  Works on Chrome   Edge  untested others     x000D   x000D    function      x000D   var enabled   true  x000D      textarea tabSupport   keydown function e    x000D   x000D       Escape key toggles tab on off x000D    if  e keyCode  27  x000D      x000D     enabled    enabled  x000D     return false  x000D      x000D   x000D       Enter Key  x000D    if  e keyCode     13  amp  amp  enabled  x000D      x000D        selection  x000D     if  this selectionStart    this selectionEnd  x000D       x000D         find start of the current line x000D      var sel   this selectionStart  x000D      var text     this  val    x000D      while  sel  gt  0  amp  amp  text sel-1       n   x000D      sel--  x000D   x000D      var lineStart   sel  x000D      while  text sel            text sel     t   x000D      sel    x000D   x000D      if  sel  gt  lineStart  x000D        x000D          Insert carriage return and indented text x000D       document execCommand  insertText   false    n    text substr lineStart  sel-lineStart    x000D   x000D          Scroll caret visible x000D       this blur    x000D       this focus    x000D       return false  x000D        x000D       x000D      x000D   x000D       Tab key  x000D    if e keyCode     9  amp  amp  enabled   x000D      x000D        selection  x000D     if  this selectionStart    this selectionEnd  x000D       x000D         These single character operations are undoable x000D      if   e shiftKey  x000D        x000D       document execCommand  insertText   false    t    x000D        x000D      else x000D        x000D       var text   this value  x000D       if  this selectionStart  gt  0  amp  amp  text this selectionStart-1     t   x000D         x000D        document execCommand  delete    x000D         x000D        x000D       x000D     else x000D       x000D         Block indent unindent trashes undo stack  x000D         Select whole lines x000D      var selStart   this selectionStart  x000D      var selEnd   this selectionEnd  x000D      var text     this  val    x000D      while  selStart  gt  0  amp  amp  text selStart-1       n   x000D       selStart--  x000D      while  selEnd  gt  0  amp  amp  text selEnd-1     n   amp  amp  selEnd  lt  text length  x000D       selEnd    x000D   x000D         Get selected text x000D      var lines   text substr selStart  selEnd - selStart  split   n    x000D   x000D         Insert tabs x000D      for  var i 0  i lt lines length  i    x000D        x000D          Don t indent last line if cursor at start of line x000D       if  i  lines length-1  amp  amp  lines i  length  0  x000D        continue  x000D   x000D          Tab or Shift Tab  x000D       if  e shiftKey  x000D         x000D        if  lines i  startsWith   t    x000D         lines i    lines i  substr 1   x000D        else if  lines i  startsWith          x000D         lines i    lines i  substr 4   x000D         x000D       else x000D        lines i      t    lines i   x000D        x000D      lines   lines join   n    x000D   x000D         Update the text area x000D      this value   text substr 0  selStart    lines   text substr selEnd   x000D      this selectionStart   selStart  x000D      this selectionEnd   selStart   lines length   x000D       x000D   x000D     return false  x000D      x000D   x000D    enabled   true  x000D    return true  x000D       x000D      x000D  textarea x000D    x000D    width  100   x000D    height  100px  x000D    tab-size  4  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt textarea class  tabSupport  gt if  something  x000D    x000D      This textarea has  tabSupport  CSS style x000D      Try using tab key x000D      Try selecting multiple lines and using tab and shift tab x000D      Try pressing enter at end of this line for auto indent x000D      Use Escape key to toggle tab support on off x000D          eg  press Escape then Tab to go to next field x000D    x000D   lt  textarea gt  x000D   lt textarea gt This text area doesn t have tabSupport class so disabled here lt  textarea gt  x000D   x000D   x000D

User · Answer

For what it s worth  here s my oneliner  for what you all have been talking about in this thread    x000D   x000D   lt textarea onkeydown  if event keyCode   9  var v this value s this selectionStart e this selectionEnd this value v substring 0  s    t  v substring e  this selectionStart this selectionEnd s 1 return false    gt  x000D   lt  textarea gt  x000D   x000D   x000D    Testest in latest editions of Chrome  Firefox  Internet Explorer and Edge

User · Answer

Try this simple jQuery function     fn getTab   function          this keydown function  e            if  e keyCode     9                var val   this value                  start   this selectionStart                  end   this selectionEnd              this value   val substring 0  start      t    val substring end               this selectionStart   this selectionEnd   start   1              return false                    return true              return this         textarea   getTab       You can also use    input   getTab

User · Answer

Modern way that both is straight-forward and does not lose the ability to undo  Ctrl Z  the last changes       your-textarea   keydown function  e        var keyCode   e keyCode    e which       if  keyCode       ui keyCode TAB            e preventDefault             const TAB SIZE   4              The one-liner that does the magic         document execCommand  insertText   false      repeat TAB SIZE                More about execCommand    https   developer mozilla org en-US docs Web API Document execCommand     Edit   As pointed out in the comment  and while this was once a  modern  solution   the feature has gone obsolete  Quoting the docs      This feature is obsolete  Although it may still work in some browsers  its use is discouraged since it could be removed at any time  Try to avoid using it

User · Answer

You have to write JS code to catch TAB key press and insert a bunch of spaces  Something similar to what JSFiddle does   Check jquery fiddle   HTML    lt textarea id  mybox  gt this is a test lt  textarea gt    JavaScript       mybox   live  keydown   function e       var keyCode   e keyCode    e which      if  keyCode    9         e preventDefault         alert  tab pressed

User · Answer

As others have written  you can use JavaScript to capture the event  prevent the default action  so that the cursor does not shift focus  and insert a tab character   But  disabling the default behavior makes it impossible to move the focus out of the text area without using a mouse   Blind users interact with web pages using the keyboard and nothing else -- they can t see the mouse pointer to do anything useful with it  so it s keyboard or nothing   The tab key is the primary way to navigate the document  and especially forms  Overriding the default behavior of the tab key will make it impossible for blind users to move the focus to the next form element   So  if you re writing a web site for a broad audience  I d recommend against doing this without a compelling reason  and provide some kind of alternative for blind users that doesn t trap them in the textarea

User · Answer

textarea   keydown function event        if event which   9           var cIndex this selectionStart          this value  this value slice 0 cIndex    Slice at cursor index               t                                  Add Tab             this value slice cIndex   join       Join with the end         event stopPropagation            event preventDefault                     Don t quit the area         this selectionStart cIndex 1          this selectionEnd cIndex 1               Keep the cursor in the right index

User · Answer

This solution allows tabbing in an entire selection like your typical code editor  and untabbing that selection too  However  I haven t figured out how to implement shift-tab when there s no selection    x000D   x000D      txtInput   on  keydown   function ev    x000D      var keyCode   ev keyCode    ev which  x000D   x000D      if  keyCode    9    x000D          ev preventDefault    x000D          var start   this selectionStart  x000D          var end   this selectionEnd  x000D          var val   this value  x000D          var selected   val substring start  end   x000D          var re  count  x000D   x000D          if ev shiftKey    x000D              re      t gm  x000D              count   -selected match re  length  x000D              this value   val substring 0  start    selected replace re        val substring end   x000D                 todo  add support for shift-tabbing without a selection x000D            else   x000D              re      gm  x000D              count   selected match re  length  x000D              this value   val substring 0  start    selected replace re    t     val substring end   x000D            x000D   x000D          if start     end    x000D              this selectionStart   end   count  x000D            else   x000D              this selectionStart   start  x000D            x000D   x000D          this selectionEnd   end   count  x000D        x000D      x000D   txtInput   x000D    font-family  monospace  x000D    width  100   x000D    box-sizing  border-box  x000D    height  200px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D   lt textarea id  txtInput  gt  x000D    document  ready function    x000D       msgid   html  This is Hello World by JQuery    x000D      x000D   lt  textarea gt  x000D   x000D   x000D

User · Answer

Borrowing heavily from other answers for similar questions  posted below      x000D   x000D  document getElementById  textbox   addEventListener  keydown   function e      if  e key     Tab         e preventDefault        var start   this selectionStart      var end   this selectionEnd          set textarea value to  text before caret   tab   text after caret     this value   this value substring 0  start            t    this value substring end           put caret at right position again     this selectionStart         this selectionEnd   start   1          x000D   lt input type  text  name  test1    gt   lt textarea id  textbox  name  test2  gt  lt  textarea gt   lt input type  text  name  test3    gt  x000D   x000D   x000D   jQuery  How to capture the TAB keypress within a Textbox How to handle  lt tab gt  in textarea

User · Answer

Every input an textarea element has a onkeydown event  In the event handler you can prevent the default reaction of the tab key by using event preventDefault   whenever event keyCode is 9   Then put a tab sign in the right position   function allowTab input        input addEventListener  keydown   function event                if event keyCode    9                        event preventDefault                 var input   event target               var str   input value              var  selectionStart   input selectionStart              var  selectionEnd   input selectionEnd               str   str substring 0   selectionStart      t    str substring  selectionEnd  str length                selectionStart                 input value   str              input selectionStart    selectionStart              input selectionEnd    selectionStart                       window addEventListener  load   function event        allowTab document querySelector  textarea           html   lt textarea gt  lt  textarea gt

User · Answer

As an option to kasdega s code above  instead of appending the tab to the current value  you can instead insert characters at the current cursor point   This has the benefit of    allows you to insert 4 spaces as an alternative to tab  undo and redo will work with the inserted characters  it won t with the OP    so replace         set textarea value to  text before caret   tab   text after caret       this  val   this  val   substring 0  start                      t                      this  val   substring end      with         set textarea value to  text before caret   tab   text after caret     document execCommand  insertText   false

User · Answer

The above answers all wipe undo history  For anyone looking for a solution that doesn t do that  I spent the last hour coding up the following for Chrome   jQuery fn enableTabs   function TAB TEXT          options     if  TAB TEXT TAB TEXT     t          text input event for character insertion     function insertText el  text           var te   document createEvent  TextEvent            te initTextEvent  textInput   true  true  null  text  9   en-US            el dispatchEvent te                catch tab and filter selection     jQuery this  keydown function e           if  e which    e keyCode   9 return true          e preventDefault            var contents   this value              sel start   this selectionStart              sel end   this selectionEnd              sel contents before   contents substring 0  sel start               first line start search   sel contents before lastIndexOf   n                first line start   first line start search  -1   0   first line start search 1              tab sel contents   contents substring first line start  sel end               tab sel contents find    e shiftKey new RegExp   n  TAB TEXT   g   new RegExp   n    g                 tab sel contents replace    e shiftKey   n    n  TAB TEXT               tab sel contents replaced       n  tab sel contents                   replace tab sel contents find  tab sel contents replace                    substring 1               sel end new   first line start tab sel contents replaced length          this setSelectionRange first line start  sel end           insertText this  tab sel contents replaced           this setSelectionRange first line start  sel end new                In short  tabs are inserted at the beginning of the selected lines   JSFiddle  http   jsfiddle net iausallc 5Lnabspr 11   Gist  https   gist github com iautomation e53647be326cb7d7112d  Example usage     textarea   enableTabs   t    Cons  Only works on Chrome as is

User · Answer

Multiple-line indetation script based on  kasdega solution      textarea   on  keydown   function  e        var keyCode   e keyCode    e which       if  keyCode     9            e preventDefault            var start   this selectionStart          var end   this selectionEnd          var val   this value          var selected   val substring start  end           var re      gm          var count   selected match re  length            this value   val substring 0  start    selected replace re    t     val substring end           this selectionStart   start          this selectionEnd   end   count

User · Answer

Based on all that people had to say here on the answers  its just a combination of keydown not keyup    preventDefault     insert a tab character at the caret  Something like   var keyCode   e keyCode    e which  if  keyCode    9       e preventDefault       insertAtCaret  txt     t       The earlier answer had a working jsfiddle but it used an alert   on keydown  If you remove this alert  then it didnt work  I ve just added a function to insert a tab at the current cursor position in the textarea   Here s a working jsfiddle for the same  http   jsfiddle net nsHGZ

User · Answer

I made one that you can access with any textarea element you like   function textControl  element  event        if event keyCode  9    event which  9                event preventDefault            var s   element selectionStart          element value   element value substring 0 element selectionStart      t    element value substring element selectionEnd           element selectionEnd   s 1             And the element would look like this    lt textarea onkeydown  textControl this event   gt  lt  textarea gt

User · Answer

if  e which    9        e preventDefault        var start     this  get 0  selectionStart      var end     this  get 0  selectionEnd       if  start     end              this  val   this  val   substring 0  start                          t                          this  val   substring end              this  get 0  selectionStart             this  get 0  selectionEnd   start   1        else           var sel     this  val   substring start  end               find     n g              count   sel match find    sel match find  length   0            this  val   this  val   substring 0  start                          t                        sel replace find    n t                           this  val   substring end    this  val   length              this  get 0  selectionStart             this  get 0  selectionEnd   end count 1

User · Answer

I was getting nowhere fast trying to use  kasdega s answer in an AngularJS environment  nothing I tried seemed able to make Angular act on the change  So in case it s of any use to passers by  here s a rewrite of  kasdega s code  AngularJS style  which worked for me   app directive  ngAllowTab   function          return function  scope  element  attrs            element bind  keydown   function  event                if  event which    9                    event preventDefault                    var start   this selectionStart                  var end   this selectionEnd                  element val element val   substring 0  start                           t    element val   substring end                    this selectionStart   this selectionEnd   start   1                  element triggerHandler  change                                           and    lt textarea ng-model  mytext  ng-allow-tab gt  lt  textarea gt

User · Answer

Simple standalone script   textarea enable tab indent   function textarea            textarea onkeydown   function e            if  e keyCode    9    e which    9               e preventDefault                var oldStart   this selectionStart              var before     this value substring 0  this selectionStart               var selected   this value substring this selectionStart  this selectionEnd               var after      this value substring this selectionEnd               this value   before            selected   after              this selectionEnd   oldStart   4

User · Answer

There is a library on Github for tab support in your textareas by wjbryant  Tab Override  This is how it works      get all the textarea elements on the page var textareas   document getElementsByTagName  textarea        enable Tab Override for all textareas tabOverride set textareas

[html] Use tab to indent in textarea

Examples related to html

Examples related to textarea