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.

works for me in Chrome/IE9/FF32 - http://jsfiddle.net/17auq970/ - which browser are you using? — Rhumborl, Dec 29 '14 at 15:11
Not exactly related, but the `e.which` check is not needed, jQuery normalizes the property for you (`which`). — Teemu, Dec 29 '14 at 15:12
You could try specifically setting the `font-family` to `monospace`. Otherwise this works perfectly fine. — Abhitalks, Dec 29 '14 at 15:14

score 7 · Accepted Answer · answered Dec 29 '14 at 15:13

7

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/

answered Dec 29 '14 at 15:13

VisioN

143,310
32
282
281

@maudulus You are welcome `:)` Also in the demo I replaced `$(this).get(0).selection...` with internally the same alternative `this.selection...` and other minor bits to make the code run faster and look better. – VisioN Dec 29 '14 at 15:19

score -1 · Answer 2 · answered Dec 29 '14 at 15:10

-1

try to insert "&nbsp&nbsp&nbsp&nbsp" instead of four spaces

PS sorry have not seen that spaces are needed in textarea, in this case HTML entities will no help

answered Dec 29 '14 at 15:10

akorenchikov

67
6

2

`` should handle four spaces normally. – VisioN Dec 29 '14 at 15:11
I tried this, but it inserts "&nbsp&nbsp&nbsp&nbsp" as as a string in the textarea. – maudulus Dec 29 '14 at 15:12

Insert four spaces instead of tab

2 Answers2

Linked