Something that really annoys me with the standard HTML textarea
element is when the Tab key is pressed, focus is shifted to the next UI widget following the textarea
. In my case I was using a textarea
as input for editing formatted content to display on a web page (a lite CMS app essentially). I wanted to be able to insert tabs into content I was editing but didn't want to use a WYSIWYG text editor component.
This was my solution with jQuery...
This code allows for tabs to be inserted between characters in the textarea
It also works for inserting a tab at the start of the line...
Most importantly however, it works when selecting multiple lines and pressing Tab. Each of the lines is indented with a Tab character...
The code above intercepts Tab key presses for any textarea
component. It then works out whether anything is selected and then inserts the Tab character into all of the appropriate spots. Once all the Tabs are inserted, the text cursor is set back to the beginning of the originally selected text.
Hope you found this post useful...
...so please read on! I love writing articles that provide beneficial information,
tips and examples to my readers. All information on my blog is provided free of
charge and I encourage you to share it as you wish. There is a small favour I ask in return however -
engage in comments below, provide feedback, and if you see mistakes let me know.
If you want to show additional support and help me pay for web hosting and
domain name registration,
donations, no matter how small, are always welcome!
Use of any information contained in this blog post/article is subject to this disclaimer
Other posts you may like...