HTML form, make tab key trigger indent?

Question

The default behaviour in browsers is to select the next form element. I want my textbox to indent code by, lets say 4 spaces when tab is pressed. Just like if you were indenting code in an IDE. How would I achieve this behaviour in JavaScript? If I have to use jQuery, or its easier, I'm fine with that.

Thanks!

This looks like a duplicate of : http://stackoverflow.com/questions/6637341/use-tab-to-indent-in-textarea — Fresheyeball, Jun 18 '12 at 17:49
If you are trying to make an editor you should take a look at [ace](https://github.com/ajaxorg/ace). — Calvein, Jun 18 '12 at 17:51

score 1 · Accepted Answer · edited May 23 '17 at 11:52

Tracking the key code and adding 4 spaces to the element should do it. You can prevent the default when the tab key is pressed. Like so?:

Edit after all comments:

Ahh, ok so you're actually asking for several JS functions (get cursor position in text area, change text, set cursor position in text area). A little more looking around would have given you all of these, but since I'm a nice guy I'll put it in there for ya. The other answers can be found in this post about getCursorPosition() and this post about setCursorPosition(). I updated the jsFiddle for ya. Here's the code update

<script>

    $('#myarea').on('keydown', function(e) { 
    var thecode = e.keyCode || e.which; 

    if (thecode == 9) { 
        e.preventDefault(); 
        var html = $('#myarea').val();
        var pos = $('#myarea').getCursorPosition(); // get cursor position
        var prepend = html.substring(0,pos);
        var append = html.replace(prepend,'');
        var newVal = prepend+'    '+append;
        $('#myarea').val(newVal);
        $('#myarea').setCursorPosition(pos+4);
    } 
});

new function($) {
    $.fn.getCursorPosition = function() {
        var pos = 0;
        var el = $(this).get(0);
        // IE Support
        if (document.selection) {
            el.focus();
            var Sel = document.selection.createRange();
            var SelLength = document.selection.createRange().text.length;
            Sel.moveStart('character', -el.value.length);
            pos = Sel.text.length - SelLength;
        }
        // Firefox support
        else if (el.selectionStart || el.selectionStart == '0')
            pos = el.selectionStart;

        return pos;
    }
} (jQuery);

new function($) {
  $.fn.setCursorPosition = function(pos) {
    if ($(this).get(0).setSelectionRange) {
      $(this).get(0).setSelectionRange(pos, pos);
    } else if ($(this).get(0).createTextRange) {
      var range = $(this).get(0).createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  }
}(jQuery);

</script>

<textarea id="myarea"></textarea>

It is assuming the tab has been used at the end of the field. Could you supply us with up-to-date jsfiddle (http://jsfiddle.net)? — Tadeck, Jun 18 '12 at 17:56
@Fike: Yes, `.live()` is deprecated since jQuery ~1.4.2 in favour of `.delegate()`. Since jQuery 1.7 both are deprecated in favour of `.on()`. — Tadeck, Jun 18 '12 at 17:57
Good call, I changed to .on() for ya. Also, I realized that it should use .val() instead of .html() since it is a form element. I just tried it out and it works well! — iDsteven, Jun 18 '12 at 17:57
Sorry, my bad. Didn't select jQuery as the framework. Works nicely :) — , Jun 18 '12 at 17:59
@Fike: It works only when editing at the end, as I said above. Check this: http://jsfiddle.net/FufNy/ — Tadeck, Jun 18 '12 at 18:00
@Fike: I know. Maybe iDsteven may improve it to work correctly when editing. — Tadeck, Jun 18 '12 at 18:04
Just edited, you needed more code than you let on, lucky I'm bored today! — iDsteven, Jun 18 '12 at 19:11

HTML form, make tab key trigger indent?

1 Answers1