3

Is there a library or a solution for achiving Tabs and Backtabs (Shift + Tab key), within HTML, using JavaScript?

I have found some solutions on the Internet, but none of them deals with Backtabs (Shift + Tab).

Help?

  • Do you mean attaching keyboard shortcuts? Would something like this help: https://github.com/jeresig/jquery.hotkeys ? – thebreiflabb May 08 '13 at 11:53

2 Answers2

4

I wrote a small JavaScript library that does exactly that: adds Tab and Shift+Tab functionality to HTML textarea elements. It's called Tab Override. You can try out the demo at http://wjbryant.github.io/taboverride/. There are no dependencies, but if you are using jQuery, there is also a jQuery wrapper plugin available for convenience.

wjbryant
  • 51
  • 2
1

Adding tabs to textareas is easy - you just add '\t'. When thinking of shift-tabs, don't think of that as a character in it's own right, it's just the tab button whilst the shift is being pressed. You can achieve this by checking if the shift key is also pressed when the tab button is pressed, and if so, process the contents of your textarea depending on the content (presumably to the left of the cursor).

A nice example has been done in jQuery here, and a decent explanation on how to get the text around the text caret can be found here.

Here's a demo (that will need cleaning up before using in a real site!)

Note: I've not bothered with setting the caret position back to its original point - just concentrated on knocking up the demo from the above links.

Community
  • 1
  • 1
LeonardChallis
  • 7,759
  • 6
  • 45
  • 76
  • I know DOM events for Input elements. I have no problem with that. What I need is an implementation of this what I am seeking: appending-adding `"\t"'s` to the current position, and deducing `"\t"'s` when I press Shift + Tab togther. –  May 08 '13 at 12:07
  • Yes, that's what I was getting at. Using those links you can do exactly that. I've added a very quick fiddle demo for you to see what I mean, using the methods from the links I shared. – LeonardChallis May 08 '13 at 12:38
  • Great solution, but could you please finish final caret position (as you mentioned in your note)? Thank you very much. – Jan Chalupa Nov 12 '15 at 07:38