My current challenge involves inserting tabs of the same size into a textarea.
The example shows that the only variation in each line of the testString is the placement of the \t.
However, when displayed in the textarea, the tab sizes differ depending on the characters preceding them. This lack of uniformity causes misalignment of text following the tabs.
In an ideal scenario, all the 5s within the textarea should align vertically, given that each line technically consists of five characters and one tab.
Although I am familiar with the CSS property tab-size, adjusting it only alters the tab size, still relying on the number of characters before it in the textarea.
I prefer using tabs over spaces to allow for easy deletion with a single backspace or delete key press. However, if multiple spaces are entered consecutively, I want the usual behavior of backspace/delete clearing only one space at a time.
Is there a solution I have overlooked? Are there any potential workarounds to achieve this desired alignment? My previous searches have not yielded useful results, prompting me to seek assistance here.
Thank you in advance for your guidance.
testString = '1\t2345' + '\n' + '12\t345' + '\n' + '123\t45' + '\n' + '1234\t5'
document.getElementById('text').value = testString<textarea cols="10" rows="4" id="text"></textarea>