EDDYMENS

EDDYMENS

How to allow the use of tabs in a textarea

GIF of default tab behavior


Why would you want to allow tabs in textarea boxes?

I have an enlarged textarea in the backend of my blog where I type my content as markdown and it has always been a pain whenever I need to indent some of the content. By default, the browser hops onto a new field whenever I hit the tab key. Up until now the only way I could indent text was using spaces. I finally changed that!


Targeting a specific textarea box

Generally, you wouldn't want to change the behavior of every textarea field you have on your page which means we need to target the exact textarea field we will like to enable tab indentation on.

To do this we assign an id to our textarea then use the getElementById method to fetch the textarea DOM object so we can work with it in our code.


    <!-- textarea area to enable the tab key on -->

    <textarea id="editor"></textarea>

    <script>

    var inputField = document.getElementById('editor'); // get textarea object

    </script>

In the above code we assigned our textarea the id editor then fetch and store the DOM object in the inputField variable using the getElementById method.


Detecting the press of the tab button

Now that we have the exact textarea object the next step is to detect when the tab key is pressed whiles the textarea is in focus thus when a user is actively typing within that specific textarea.

In other to detect when the tab key is pressed we can use the keycode method which emits a specific number whenever any key is pressed. The keycode for the tab key is 9. The corresponding keycodes for every key can be found at https://keycode.info

The next step is to listen for the keycode 9 then perform some actions based on that

Building up from our initial code we get this:


    <!-- textarea area to enable the tab key on -->

    <textarea id="editor"></textarea>

    <script>

    var inputField = document.getElementById('editor'); // get textarea object

       inputField.onkeydown = function(e) { // list for when any key is pressed

        if (e.keyCode === 9) { // block to catch when tab key is pressed

            return false; //prevent default action

        }

    };

    </script>

Note the return false statement within the if statement this is what prevents the press of the tab key from losing focus and moving to the next page element. It prevents the default behavior of the tab key.


Appending the tabs to your text

GIF of tab enabled in textarea

It's now time for the meat of our implementation, which is to append a tab to the text whenever the tab key is pressed. To do this we will use the .setRangeText(replacement, start, end, mode) method. You can access this method for any input and textarea field object. It allows you to replace any part of your text with a another text. You also need to specify the starting and ending position of the text you will like to replace.

In our case, we are not replacing any text but rather appending a tab between the text so our start and end will have the same value and our replacement text will be \t which is the symbolic representation of a tab also known as an escape sequence

The mode value determines how the replacement string is going to be appended, thus if you set it to start subsequent tabs will be placed before the older one, and vice versa for when the mode is set to end. We will set this to end because with that the cursor will be put at the end of the tab.

To get our start and end we use the .selectionStart property which will return the cursor position.

Here is what you get when you put everything together:


    <!-- textarea area to enable the tab key on -->

    <textarea id="editor"></textarea>

    <script>

    var inputField = document.getElementById('editor'); // get textarea object

       inputField.onkeydown = function(e) { // list for when any key is pressed

        if (e.keyCode === 9) { // block to catch when tab key is pressed

            this.setRangeText(

                 '\t',

                  this.selectionStart,

                  this.selectionStart,

                  'end'

             )

            return false; //prevent default action

        }

    };

    </script>

And that's it! If you enjoyed this post please be sure to join my newsletter so you don't miss my subsequent posts :)