How To Allow The Use Of Tabs In A Textarea

Table of contents

• Why would you want to allow tabs in textarea boxes?
• Targeting a specific textarea box
• Detecting the press of the tab button
• Appending the tabs to your text

Why would you want to allow tabs in textarea boxes?

I have an enlarged textarea box 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 by 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.

✅ Wrap📋
01: <!-- textarea area to enable the tab key on -->
02: 
03: <textarea id="editor"></textarea>
04: 
05: <script>
06: 
07: var inputField = document.getElementById('editor'); // get textarea object
08: 
09: </script>

In the code above, we assigned our textarea the id editor and 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 Javascript 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 and then perform some actions based on that.

Building up from our initial code we get this:

✅ Wrap📋
01: 
02: <!-- textarea area to enable the tab key on -->
03: 
04: <textarea id="editor"></textarea>
05: 
06: <script>
07: 
08: var inputField = document.getElementById('editor'); // get textarea object
09: 
10:     inputField.onkeydown = function(e) { // list for when any key is pressed
11: 
12:     if (e.keyCode === 9) { // block to catch when tab key is pressed
13: 
14:         return false; //prevent default action
15: 
16:     }
17: 
18: };
19: 
20: </script>
21: 

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

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 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:

✅ Wrap📋
01: 
02: <!-- textarea area to enable the tab key on -->
03: 
04: <textarea id="editor"></textarea>
05: 
06: <script>
07: 
08: var inputField = document.getElementById('editor'); // get textarea object
09: 
10:     inputField.onkeydown = function(e) { // list for when any key is pressed
11: 
12:     if (e.keyCode === 9) { // block to catch when tab key is pressed
13: 
14:         this.setRangeText(
15: 
16:                 '\t',
17: 
18:                 this.selectionStart,
19: 
20:                 this.selectionStart,
21: 
22:                 'end'
23: 
24:             )
25: 
26:         return false; //prevent default action
27: 
28:     }
29: 
30: };
31: 
32: </script>
33: 

Here is another article you might like 😊 How to build your own static site generator