6 ms·

tabIndent.js - A JavaScript Library For Tab-Enabled TextAreas

76 points by Hirvesh 14y ago

Hirvesh 14y ago
Via Functionn - Open Source Resources For Web Developers & Designers: http://functionn.blogspot.com/2012/11/tabindentjs-javascript-library-for-tab.html http://functionn.blogspot.com/2012/11/tabindentjs-javascript... P.S. Functionn contains a whole lot more of awesome resouces like tabIndent.js. There only a fraction of them I can post here at a time. Take a look if you're interested, and subscribe: http://functionn.blogspot.com http://functionn.blogspot.com
- julianlam 14y ago
  Thanks again for the shoutout, Hirvesh :)
rpicard 14y ago
I don't see a license specified anywhere. What is it released under?
- Hirvesh 14y ago
  I posted an issue re. the license type on the library's github page, the author replied with MIT License. Updated the post as well: http://functionn.blogspot.com/2012/11/tabindentjs-javascript-library-for-tab.html http://functionn.blogspot.com/2012/11/tabindentjs-javascript...
- julianlam 14y ago
  Hi rpicard, as Hirvesh mentioned, the project is released under MIT. I will be adding the license details to the repo files shortly. Thanks for your interest!
  - rpicard 14y ago
    Great, thanks!
kibwen 14y ago
Something like this would make markdown editing in Github comments usable.
romaniv 14y ago
It's rather unfortunate that tab is also used for keyboard navigation between fields, since this would be the default behavior of text areas I would like.
- julianlam 14y ago
  Indeed. Many of the commenters have suggested alternatives, such as using Ctrl-[ and Ctrl-] instead, but the best by far that I've seen would be also binding a listener to the "escape" key, so that tab functionality is restored. I believe I'll probably end up doing that, unless somebody else does it before I do.
fratis 14y ago
This is awesome. I'd love if the developer would add (even if it were optional) Command+[ / Command+] functionality to indent multiple lines at a time.
- arcatek 14y ago
  Windows/Emacs user here. What does these shortcuts do ?
  - lazerwalker 14y ago
    If you have a block of code/text selected, Cmd+[ and Cmd+] shift the entire textblock one tabindent to the left or right, maintaining the relative indent level of each individual line.
    - arcatek 14y ago
      Is it different from ctrl+tab / ctrl+shift+tab ? Because these shortcuts works in this editor ("Multi-line highlighted text is also tab-able, and shift-tab removes a tab character instead").
- ya3r 14y ago
  multiple lines indentation at a time is supported. You have to select multiple lines and press tab (to indent) or shift+tab (to remove indentation). I like the fact that if you select multiple lines with one line partially selected, it works as expected (selecting whole of the partially selected line)
- julianlam 14y ago
  Thanks for your interest! It has been noted. Once I work through the existing backlog of bugs, I'll revisit ideas such as this one.
todd3834 14y ago
Pretty cool! Would be even cooler with vim commands ;-)
dergachev 14y ago
Awesome. One could make a useful bookmarklet out of this. I'm worried about accessibility. Most of the time tabs are used to navigate between fields, so it'd be cool if this was "opt-in", eg entering the textarea would render an icon to click that enabled this feature. Or at least some way to tell the user that pressing the ESCAPE key is how you should tab-out of the field.
- mtrimpe 14y ago
  You could also let people tab-through by not enabling this functionality until you move within the text-field.
- julianlam 14y ago
  Hi dergachev -- a helpful Reddit user (where I posted the project originally) went ahead and did this: http://www.reddit.com/r/javascript/comments/13tfpf/burned_through_a_quick_weekend_project/c771al3?context=1 http://www.reddit.com/r/javascript/comments/13tfpf/burned_th...
ilink 14y ago
Very nice, it would be great if stackoverflow used this.
jasdeepsingh 14y ago
This is really awesome! I've always wondered why is this not the default behaviour on a text area?
- CWIZO 14y ago
  Because it would brake tab-index functionality.
adroitec 14y ago
Very interesting. I recently explored several different projects for tab-enabled textareas and currently use https://github.com/wjbryant/taboverride https://github.com/wjbryant/taboverride. One interesting thing about most implementations of tabs in textareas is that the insertion of a tab typically breaks the browser undo/redo stack for the textarea. This guy implemented it correctly though as mentioned in the bug filed on tabIndent.js: http://www.reddit.com/r/javascript/comments/13tfpf/burned_through_a_quick_weekend_project/c77eq1r?context=2 http://www.reddit.com/r/javascript/comments/13tfpf/burned_th...
mistercow 14y ago
Very cool. Now somebody just needs to pack this into a Chrome extension so that all text areas do this.
- ilink 14y ago
  Done! Well, I hope it's done - I haven't made a chrome extension before. Let me know if it breaks... https://github.com/Ilink/tabIndent.js https://github.com/Ilink/tabIndent.js Cloned the project, should be available in the "extension/chrome" directory.
- copypasteweb 14y ago
  Meanwhile in Firefox, since 2008: https://addons.mozilla.org/en-US/firefox/addon/tabinta/ https://addons.mozilla.org/en-US/firefox/addon/tabinta/
ollysb 14y ago
Seeing as delete will remove a tab I think shift-tab would be better used for the normal behaviour, take you to the next input.
- undershirt 14y ago
  shift-tab over selected lines removes one level of indentation.
- archangel_one 14y ago
  Shift-tab generally has the meaning of "untab" already. Overloading it to mean "move to next input" would be very confusing for those of us expecting the old behaviour, and not at all discoverable for anyone else.
lowboy 14y ago
Good stuff! I was going to point out the undo/redo and multiline tabbing affecting the line with the cursor on it, but bugs are already filed on 'thub.
julianlam 14y ago
Hi everybody, this is Julian, the author of the project. I had no idea a small weekend project like this would be so widely accepted! Thank you all for your comments -- I'll be keeping track of them, and implementing features based on demand. Follow the development on the issue tracker: https://github.com/julianlam/tabIndent.js/issues https://github.com/julianlam/tabIndent.js/issues Thanks again!
sokrates 14y ago
Feature wish: when pressing enter, indent the new line as deep as the previous line.
wjbryant 14y ago
I'm a little late to the discussion here, but thought I'd post a comment anyway. My project (https://github.com/wjbryant/taboverride https://github.com/wjbryant/taboverride) has been around for a while and I'm always open to pull requests and feature enhancements / improvements. It looks like you're trying to solve the same problems and implement features which I've already implemented. Why not collaborate?

76 points by Hirvesh 14y ago

Via Functionn - Open Source Resources For Web Developers & Designers: http://functionn.blogspot.com/2012/11/tabindentjs-javascript-library-for-tab.html http://functionn.blogspot.com/2012/11/tabindentjs-javascript... P.S. Functionn contains a whole lot more of awesome resouces like tabIndent.js. There only a fraction of them I can post here at a time. Take a look if you're interested, and subscribe: http://functionn.blogspot.com http://functionn.blogspot.com

julianlam 14y ago
Thanks again for the shoutout, Hirvesh :)

rpicard 14y ago

I don't see a license specified anywhere. What is it released under?

Hirvesh 14y ago
I posted an issue re. the license type on the library's github page, the author replied with MIT License. Updated the post as well: http://functionn.blogspot.com/2012/11/tabindentjs-javascript-library-for-tab.html http://functionn.blogspot.com/2012/11/tabindentjs-javascript...
julianlam 14y ago
Hi rpicard, as Hirvesh mentioned, the project is released under MIT. I will be adding the license details to the repo files shortly. Thanks for your interest!
- rpicard 14y ago
  Great, thanks!

kibwen 14y ago

Something like this would make markdown editing in Github comments usable.

romaniv 14y ago

It's rather unfortunate that tab is also used for keyboard navigation between fields, since this would be the default behavior of text areas I would like.

julianlam 14y ago
Indeed. Many of the commenters have suggested alternatives, such as using Ctrl-[ and Ctrl-] instead, but the best by far that I've seen would be also binding a listener to the "escape" key, so that tab functionality is restored. I believe I'll probably end up doing that, unless somebody else does it before I do.

fratis 14y ago

This is awesome. I'd love if the developer would add (even if it were optional) Command+[ / Command+] functionality to indent multiple lines at a time.

arcatek 14y ago
Windows/Emacs user here. What does these shortcuts do ?
- lazerwalker 14y ago
  If you have a block of code/text selected, Cmd+[ and Cmd+] shift the entire textblock one tabindent to the left or right, maintaining the relative indent level of each individual line.
  - arcatek 14y ago
    Is it different from ctrl+tab / ctrl+shift+tab ? Because these shortcuts works in this editor ("Multi-line highlighted text is also tab-able, and shift-tab removes a tab character instead").
ya3r 14y ago
multiple lines indentation at a time is supported. You have to select multiple lines and press tab (to indent) or shift+tab (to remove indentation). I like the fact that if you select multiple lines with one line partially selected, it works as expected (selecting whole of the partially selected line)
julianlam 14y ago
Thanks for your interest! It has been noted. Once I work through the existing backlog of bugs, I'll revisit ideas such as this one.

todd3834 14y ago

Pretty cool! Would be even cooler with vim commands ;-)

dergachev 14y ago

Awesome. One could make a useful bookmarklet out of this. I'm worried about accessibility. Most of the time tabs are used to navigate between fields, so it'd be cool if this was "opt-in", eg entering the textarea would render an icon to click that enabled this feature. Or at least some way to tell the user that pressing the ESCAPE key is how you should tab-out of the field.

mtrimpe 14y ago
You could also let people tab-through by not enabling this functionality until you move within the text-field.
julianlam 14y ago
Hi dergachev -- a helpful Reddit user (where I posted the project originally) went ahead and did this: http://www.reddit.com/r/javascript/comments/13tfpf/burned_through_a_quick_weekend_project/c771al3?context=1 http://www.reddit.com/r/javascript/comments/13tfpf/burned_th...

ilink 14y ago

Very nice, it would be great if stackoverflow used this.

jasdeepsingh 14y ago

This is really awesome! I've always wondered why is this not the default behaviour on a text area?

CWIZO 14y ago
Because it would brake tab-index functionality.

adroitec 14y ago

Very interesting. I recently explored several different projects for tab-enabled textareas and currently use https://github.com/wjbryant/taboverride https://github.com/wjbryant/taboverride. One interesting thing about most implementations of tabs in textareas is that the insertion of a tab typically breaks the browser undo/redo stack for the textarea. This guy implemented it correctly though as mentioned in the bug filed on tabIndent.js: http://www.reddit.com/r/javascript/comments/13tfpf/burned_through_a_quick_weekend_project/c77eq1r?context=2 http://www.reddit.com/r/javascript/comments/13tfpf/burned_th...

mistercow 14y ago

Very cool. Now somebody just needs to pack this into a Chrome extension so that all text areas do this.

ilink 14y ago
Done! Well, I hope it's done - I haven't made a chrome extension before. Let me know if it breaks... https://github.com/Ilink/tabIndent.js https://github.com/Ilink/tabIndent.js Cloned the project, should be available in the "extension/chrome" directory.
copypasteweb 14y ago
Meanwhile in Firefox, since 2008: https://addons.mozilla.org/en-US/firefox/addon/tabinta/ https://addons.mozilla.org/en-US/firefox/addon/tabinta/

ollysb 14y ago

Seeing as delete will remove a tab I think shift-tab would be better used for the normal behaviour, take you to the next input.

undershirt 14y ago
shift-tab over selected lines removes one level of indentation.
archangel_one 14y ago
Shift-tab generally has the meaning of "untab" already. Overloading it to mean "move to next input" would be very confusing for those of us expecting the old behaviour, and not at all discoverable for anyone else.

lowboy 14y ago

Good stuff! I was going to point out the undo/redo and multiline tabbing affecting the line with the cursor on it, but bugs are already filed on 'thub.

julianlam 14y ago

Hi everybody, this is Julian, the author of the project. I had no idea a small weekend project like this would be so widely accepted! Thank you all for your comments -- I'll be keeping track of them, and implementing features based on demand. Follow the development on the issue tracker: https://github.com/julianlam/tabIndent.js/issues https://github.com/julianlam/tabIndent.js/issues Thanks again!

sokrates 14y ago

Feature wish: when pressing enter, indent the new line as deep as the previous line.

wjbryant 14y ago

I'm a little late to the discussion here, but thought I'd post a comment anyway. My project (https://github.com/wjbryant/taboverride https://github.com/wjbryant/taboverride) has been around for a while and I'm always open to pull requests and feature enhancements / improvements. It looks like you're trying to solve the same problems and implement features which I've already implemented. Why not collaborate?