Indent code in textarea using jQuery

Posted on Sunday December 04, 2011 / by Eric Potvin

How many times you wanted to write code using the "tab" in a textarea and realizing the cursor moved to the next form element and what you typed is lost?

Here's a quick JavaScript code (with jQuery) that will fix this problem:

$(document).ready(function(e) {

  // Using the <TAB>
  $('textarea.tab').keydown(function(e) {
    if(e.keyCode == 9) {
      var start = $(this).get(0).selectionStart;
      $(this).val($(this).val().substring(0, start) + "\t" + $(this).val().substring($(this).get(0).selectionEnd));
      $(this).get(0).selectionStart = $(this).get(0).selectionEnd = start + 1;
      return false;
    }
  });

  // Using Spaces
  $('textarea.space').keydown(function(e) {
    if(e.keyCode == 9) {
      var start = $(this).get(0).selectionStart;
      $(this).val($(this).val().substring(0, start) + "    " + $(this).val().substring($(this).get(0).selectionEnd));
      $(this).get(0).selectionStart = $(this).get(0).selectionEnd = start + 4;
      return false;
    }
  });
});