Allow Tab Indentation In Inputs Or Textareas

For this blog I wanted to be able to press tab in my textarea and have it indent my chosen amount of spaces.

I tried searching to write my own jquery function that would do it but it turned out to be a lot more difficult than you would think. This is because most of the solutions I found involved added a "\t" but that had no control over how many spaces it was inputting and it was adding something like 6 spaces for me which just wasnt going to do.

I finally found a jquery plugin that worked called Tabby. This was really simple and to the point and easily allowed me to set my favourite number of spaces.

So just include that script on your page and add this line to your page. In the tabString portion just add as many spaces as your prefer.

$(function(){
  $('.my-textarea').tabby({tabString: '  '});
});

Now you can use tabs, shift-tabbing, and select multiple lines and tab/shift-tab them all.

**Note: it is an old and unmaintained plugin so it does have some issues. For example I found Chrome was adding 2 spaces for each space I put in the tabString option. So just play around with what works.