Find solution
How do I open Javascript link in new tab?

Pre-existing JavaScript for using tab to indent textarea contents?

  • Has anyone previously published a JavaScript methodology for using the Tab key to indent while within HTML textarea controls? I'd like to use light markup (Markdown) inside a Web form for composing blog entries/essays/etc. However, many elements require whitespace indentation, e.g. blockquotes, nested lists, etc, for which I'd prefer to use the Tab key instead of raping the spacebar (Markdown works best with 4-space indents, otherwise I might just get by with 2 spaces). One can use JavaScript to implement a "normal" usage of the Tab key, and I have already started on such an implementation. However, I don't want to re-invent the wheel, and find it hard to believe nobody else has done something like this prior. Google has not helped much (tough thing to search for--far too much noise in the results). Does anyone know of any pre-existing scripts/techniques that accomplish this, or should I forge ahead and continue writing my own? Please note that I am familiar with the "tabs vs spaces" debate and do not wish for it to repeat here; in addition, I realize that for publicly facing websites, overriding default keyboard behavior can be an accessibility no-no--this is for the admin interface for a personal website.

  • Answer:

    I've done a bit of key handler control for some of my work, so it doesn't seem like it would be difficult to implement. The basic steps would be:attach event to textarea.onkeypress to intercept strokesTAB is char code 13 (IIRC)... so when the textarea has focus and the captured key == 13, output 5 spaces (or whatever your tab preferences are), otherwise output the entered key.(optional) If you plan on displaying this later on in a browser, you'll need to convert those spaces to &nbsp; characters--otherwise they'll get truncated.So, something like this: <textarea id="txtfield" onkeypress="return intercept(event)" /> <script type="javascript" >   function intercept(event) {     var key = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;     if (key == 13) {       return " ";     } else {       return key;     }   } </script>

cyrusdogstar at Ask.Metafilter.Com Visit the source

Was this solution helpful to you?

Other answers

Dammit, that first return statement should have more spaces (I should listen to my own advice, particulalry #3!). Anyway, you get the idea. :)

Civil_Disobedient

If you wanted something that did this automatically for all textareas in your webpage, you might do something like this: <script type="javascript" >   window.onload = function() {   var txtareas = null;   if ((txtareas = document.getElementsByTagName('TEXTAREA')) != null) {     for (var i=0; i       txtareas.onkeypress = intercept(event);     }   } </script>>

Civil_Disobedient

Dammit, sorry for the mangled code. Too bad Matt hasn't implemented a better <code> handling mechanism for display. :)

Civil_Disobedient

jesus, cyrus, GET OUT OF MY HEAD. i spent part of last night writing a short subroutine for my homebrew blogware that displays this: -abc --ceg -def as s.i'm planning to do what cyrus describes (TAB key behavior), only i'm also going to make it more wysiwyg-ish, so that stuff is stored in the format above (dashes for level of indentation) but displayed while editing as s, nested as appropriate. any tips or pointers to existing goodstuff appreciated (i am planning on doing some googling of my own.)

lbergstr

err ... forgot to use entities, there should be some (plaintext) <ul>s in there.

lbergstr

Yea, I'm having a hard time parsing your post there, lbergstr, although I get the basic idea--hadn't thought of that approach. Civil, I know how to do it, I was just hoping to find some more-though-out, in-production-use-somewhere code so I wouldn't have to make previously solved mistakes. However, it looks like I've got it now, at least for the basic case (being able to select+indent, and more easily, being able to un-indent, are now next on my list). http://bitprophet.org/code/javascript_tab.html

cyrusdogstar

Note, by the way, that while I may change it in the future, I don't plan on bothering making this cross-browser, as again it's currently for personal use. And the extra form controls on that page are just fluff, I've found it makes things easier (albeit mostly with CSS) to have a "realistic" environment for code I'm developing--been bitten by bizarre bugs in the past that resulted from initial development being done in a pristine setting.

cyrusdogstar

just to be clear: -abc --def -ceg turn into: <ul> <li>abc</li> <li><ul><li>def</li></ul></li> <li>ceg</li> </ul> (and if you don't mind, cyrus, i may steal your code and use it as a starting point)

lbergstr

Oh, sure, go right ahead! I plan to publish it when it's done, presuming nobody answers my original question with a link to something better. Once the site I'm writing this for is up, it will go up as one of the earlier entries.

cyrusdogstar

Load more

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.