on e.keycode == 9 (tab), add 12 spaces, and prevent default behavior

Question

Have a slight problem with this code :

jQuery.fn.markCursor = function(e){
    $(this).focus();
   $(this).keyup(function(e) {
  $cursorStart.enterText(e);

});

};

jQuery.fn.enterText = function(e){

if (e.keyCode == 9){
    $cursor.val("");
    alert("hello");
}

};

The tab key is resorting to its default behavior in the browser, would .preventdefault help here? How would I add 12 spaces without the code taking up 12 lines in jquery :p

yes I tried but it seems that tab has a clear issue, I was just wondering if anyone else had more clarity — re1man, Sep 28 '11 at 18:12

Kevin B · Answer 1 · 2011-09-28T18:36:45.503

5

To catch the tab keypress, you would have to bind to the keydown event. When pressing tab, a keyup event is not triggered.

edited Sep 28 '11 at 18:36

answered Sep 28 '11 at 18:08

Kevin B

94,570
16
163
180

Rob W · Accepted Answer · 2011-09-28T19:32:20.687

e.preventDefault() would help. If you want to add twelfe spaces without literally typing them, use Array(12).join(" ");. Surely, typing twelfe spaces may be easier.

Some methods to type twelfe spaces:

var s=[];s.length=12;s.join(" ");
var s=Array(12).join(" ");
var s="            "; //Shortest so far.

As you can see, using Array(i).join(" ") starts being useful when i is higher than 17. Note that the this approach enables a dynamic indenting feature.

EDIT
Quick tuturial on key events:

keydown - Initiated when the key is pressed down. This event is fired once, before any default event has occured
keypress - This event is fired (multiple times) while the key is pressed down, before a default event has occured.
keyup - Fired after the key has been released (which happens only once per set of key events). Needless to say, all of the default events have already been occured.

keydown and keypress can be used to capture and cancel key events. If you want to catch and validate all key events, use keypress. If you've assigned multiple events (eg to window and to input), you may also use e.stopPropagation() in conjunction with e.preventDefault(). The first function stops the event from bubbling further (=the event isn't passed to other event listeners any more). The second function prevents the default behaviour from occuring.

e.preventDefault() doesn't seem to work for me though, on pressing tab, the cursor just goes to the url — re1man, Sep 28 '11 at 18:08
Editing answer, included a short but complete tuturial about key events. — Rob W, Sep 28 '11 at 19:32

score 1 · Answer 3 · answered Sep 28 '11 at 18:06

1

I'm so sick of the overuse of Jquery. If you look at the preventDefault function, all it does is change the return value of window.event.

function stopTab(e){
    e=e||window.event;
    if(e.keyCode==9){
        document.querySelector('textarea').value+='            ';
        e.returnValue= false;
    }

}

You'll have to do something about the appending space problem by finding the cursor's position.

answered Sep 28 '11 at 18:06

mowwwalker

16,634
25
104
157

how would this be used though...would I need to declare this in the markcursor before the keyup to intercept it? – re1man Sep 28 '11 at 18:21

on e.keycode == 9 (tab), add 12 spaces, and prevent default behavior

3 Answers3

Linked