Insert four spaces instead of tab

Question

I am trying to insert four spaces when the tab key is pressed. I was using the following code (see spaces = "\t"), but when I switch it to spaces = " " only one space is inserted when I press tab. I also tried " " + " " + " " + " ":

$(function () {
  $('textarea').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
      spaces = "\t"
      $(this).val($(this).val().substring(0, start)
                  + spaces 
                  + $(this).val().substring(end));

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

NOTE: This is to insert spaces in a browser-based textarea/ide.

Answer 1

Your code works fine but you simply put caret to the wrong place. Change the last line to:

this.selectionStart = this.selectionEnd = start + spaces.length;

DEMO: http://jsfiddle.net/qdqrs3cw/