change tab key behavior in javascript

Question

I'm having a text editor inside a contenteditable div.

I need to change the [TAB] behavior to insert spaces or a \t instead of focusing on next element which is the default browser behavior.

I have an event handler like so:

function keyDown(e) {
    // press tab.
    if (e.keyCode == 9) {
        e.preventDefault();
        return;
    }
}

which results in not losing focus on the div, all i need now is to insert a [TAB] or spaces at the cursor position.

how can this be done?

score 2 · Answer 1 · edited May 23 '17 at 12:07

2

This will do the trick: http://jsfiddle.net/eFLGZ/

$('textarea').keydown(keyDown);

function keyDown(e) {

    // press tab.
    if (e.keyCode == 9) {
        e.preventDefault();

        // Insert a space.
        var txt = $('textarea').val();
        $('textarea').val(txt + ' ');

        return;
    }
}

See here for how to enter the text where the cursor is currently placed.

edited May 23 '17 at 12:07

Community

1
1

answered Aug 30 '12 at 07:37

Greg Ross

3,479
2
27
26

2

this will add the space at the end of the text, but what if im editing in the middle of the textarea? – Israhack Sep 03 '12 at 06:32
1

I guess we'll never know – Denny Feb 27 '19 at 08:32

change tab key behavior in javascript

1 Answers1