ansaurus

Question

Answer 1

A:

                    <SCRIPT TYPE="text/javascript"><!--
function CatchTab(myfield,e) {
  var keycode;
  if (window.event) {
    keycode = window.event.keyCode;
  } else if (e) { 
    keycode = e.which;
  } else {
    return true;
  }

  if (keycode == 9) { // if is the tab key
    // Do stuff, return false to prevent key from being output
  }
}
//--></SCRIPT>

<INPUT NAME="MyText" TYPE="Text" onKeyPress="return CatchTab(this,event)" />

Yaakov Ellis 2008-08-06 13:30:51

Answer 2

+2 A:

The previous answer is fine, but I'm one of those guys that's firmly against mixing behavior with presentation (putting JavaScript in my HTML) so I prefer to put my event handling logic in my JavaScript files. Additionally, not all browsers implement event (or e) the same way. You may want to do a check prior to running any logic:

document.onkeydown = TabExample;

function TabExample(evt) {

    var evt = (evt) ? evt : ((event) ? event : null);
    if(evt.keycode == 9) {

        // do work

    }

}

Tom 2008-08-06 13:35:44

Answer 3

+15 A:

I'd rather tab indentation not work than breaking tabbing between form items.

If you want to indent to put in code in the Markdown box, use Ctrl+K (or ⌘K on a Mac).

In terms of actually stopping the action, jQuery (which Stack Overflow uses) will stop an event from bubbling when you return false from an event callback. This makes life easier for working with multiple browsers.

Mike Tomasello 2008-08-06 13:36:04

Answer 4

+3 A:

I would advise against changing the default behaviour of a key. I do as much as possible without touching a mouse, so if you make my tab key not move to the next field on a form I will be very aggravated.

A shortcut key could be useful however, especially with large code blocks and nesting. Shift-TAB is a bad option because that normally takes me to the previous field on a form. Maybe a new button on the WMD editor to insert a code-TAB, with a shortcut key, would be possible?

Wally Lawless 2008-08-06 13:36:33

Answer 5

+1 A:

@Mike Tomasello

I like the Ctrl-K functionality because it takes me right to a "code" block, but once I'm inside the code block, I would like to easily tab-over, and Ctrl-K doesn't accomplish this.

Terrapin 2008-08-06 13:39:32

Answer 6

+10 A:

Even if you capture the keydown/keyup event, those are the only events that the tab key fires, you still need some way to prevent the default action, moving to the next item in the tab order, from occurring.

In Firefox you can call the "preventDefault()" method on the event object passed to your event handler. In IE, you have to return false from the event handle. The JQuery library provides a preventDefault method on it's event object that works in IE and FF.

<body>
<input type="text" id="myInput">
<script type="text/javascript">
    var myInput = document.getElementById("myInput");
    if(myInput.addEventListener ) {
        myInput.addEventListener('keydown',this.keyHandler,false);
    } else if(myInput.attachEvent ) {
        myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
    }

    function keyHandler(e) {
        var TABKEY = 9;
        if(e.keyCode == TABKEY) {
            this.value += "    ";
            if(e.preventDefault) {
                e.preventDefault();
            }
            return false;
        }
    }
</script>
</body>

ScottKoon 2008-08-16 13:55:26

I just corrected line 4, from "if (el.attachEvent)" to "if (myInput.attachEvent)"

Sohnee 2010-09-10 07:42:56

Answer 7

A:

Don't forget to check for the focused window, and let it bubble up normally if you are not in the editor textarea.

FlySwat 2008-08-24 14:57:44

Answer 8

+1 A:

In Chrome on the Mac, alt-tab inserts a tab character into a <textarea> field.

Here’s one: . Wee!

Paul D. Waite 2010-02-17 10:55:00

Answer 9

A:

there is a problem in best answer given by ScottKoon

here is it

} else if(el.attachEvent ) { myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */ } Should be

} else if(myInput.attachEvent ) { myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */ }

Due to this it didn't work in IE. Hoping that ScottKoon will update code

chintan123 2010-09-09 06:14:55

ansaurus

tags:

views:

answers:

Capturing TAB key in text box

related questions