Insert tab indent instead of jumps into another form element or link

Question

I'm currently working on web's Content Management System written in java/jsp. Whenever the user want to edit page which is in html, i wish that user can maintain the indent format in html. So my problem for now is, every time user press tab key, it will jump to another form element or link instead of inserting an indent.

for example i want user to be able to type like this(without using space key, &nbsp &thinsp, &ensp, or &emsp):

<table>
     <tr>
         <td></td>
     </tr>
</table>

instead of like this:

<table>
<tr>
<td></td>
</tr>
</table>

is there any code that can overcome this? (I'm trying to avoid using any plugin because I want it to be browser independent :D )

Thanks in advance!

Answer 1

$(document).delegate('#textbox', 'keydown', function(e) {
    var keyCode = e.keyCode || e.which;

    if (keyCode == 9) {
        e.preventDefault();
        var start = $(this).get(0).selectionStart;
        var end = $(this).get(0).selectionEnd;

        // set textarea value to: text before caret + tab + text after caret
        $(this).val($(this).val().substring(0, start)
            + "\t"
            + $(this).val().substring(end));

        // put caret at right position again
        $(this).get(0).selectionStart =
        $(this).get(0).selectionEnd = start + 1;
    }
});

http://jsfiddle.net/jz6J5/