How can I insert TAB to indent code from textarea

Question

I want that when TAB was pressed, the code will be indented. I tried using these functions from this question.

Nothing works because I have 3 textareas.

const htmlField = document.getElementById("html");
const cssField = document.getElementById("css");
const jsField = document.getElementById("js");

One next to the other. When I press TAB, the textarea beside is selected and nothing happens in the original source textarea from the event.

Try providing your html (is this for an html ui?) You example looks very incomplete are you. sure it's all there? — joshp, Sep 01 '20 at 04:01

score 0 · Accepted Answer · answered Sep 01 '20 at 03:20

Based on the link you provided, I have tested one of the answers and it seems to be working as intended. You just have to provide a closing </textarea> tag to each of your textareas.

<textarea id="html" 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;}"></textarea>

<textarea id="css" 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;}"></textarea>

<textarea id="js" 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;}"></textarea>

How can I insert TAB to indent code from textarea

1 Answers1