I have a textarea, which I am trying to insert tabs of the same size into.
As you can see in the example, the only difference in each line of the testString is the position of the t.
However, in the resulting textarea, the size of the tabs are different, seemingly dependent on how many characters are in front of it. This causes text after the tab to not be aligned properly.
In my perfect world, all of the 5s in the textarea would be aligned vertically, since each line is technically the same (five characters + one tab)
I am aware of the CSS property tab-size, and though this indeed changes the size of tabs, the resulting tab size in the textarea is still based on how many characters are in front of it.
I don’t want to insert spaces rather than tabs, because I want a single backspace/delete to remove the entire tab, but if someone enters multiple spaces in succession, I would like backspace/delete to only clear single spaces as per usual.
Is there something that I am missing? Are there any workarounds to achieve this? My research has returned no helpful results, so I am now reaching out here.
Thanks for your help.
testString = '1t2345' + 'n' + '12t345' + 'n' + '123t45' + 'n' + '1234t5'
document.getElementById('text').value = testString<textarea cols="10" rows="4" id="text"></textarea>