var inputTabKeyFor1Line = function(e, elm){
	if( e.keyCode !== 9 ){
    return;
  }
	e.preventDefault();

  var tabSpace = '  ' || '\n';
  var tabLength = tabSpace.length;
  if(tabSpace === '\t'){
    tabLength = 1;
  }

	var cursorPosition = elm.selectionStart;
	var cursorLeftValue     = elm.value.substr( 0, cursorPosition );
	var cursorRightValue    = elm.value.substr( cursorPosition, elm.value.length );

	elm.value = cursorLeftValue + tabSpace + cursorRightValue;

	elm.selectionEnd = cursorPosition + tabLength;
}



var inputTabKeyForMultiLine = function(e, elm){
	if( e.keyCode !== 9 ){
    return;
  }
	e.preventDefault();

  var tabSpace = '  ' || '\n';
  var tabLength = tabSpace.length;
  if(tabSpace === '\t'){
    tabLength = 1;
  }

  var isShift = e.shiftKey;
  var txt = elm.value;
  var slct = {left: elm.selectionStart, right: elm.selectionEnd};
  var selectLength = slct.right - slct.left;
  var selectValue = txt.substr(slct.left, selectLength);
  var isMultiSelect = selectValue.match('\n');
  var lineStart = txt.substr(0, slct.left).split('\n').length - 1;
  var lineEnd = txt.substr(0, slct.right).split('\n').length - 1;
  var lines = txt.split('\n');

  console.log({
    slct:slct,
    selectValue:selectValue,
    isMultiSelect:isMultiSelect,
    lineStart:lineStart,
    lineEnd:lineEnd,
    lines:lines,
  });

  if(slct.left === slct.right && !isShift) {
    elm.value = txt.substr(0, slct.left) + tabSpace + txt.substr(slct.left, txt.length);
    slct.left += tabLength;
    slct.right += tabLength;
  } else {
    for(i = lineStart; i <= lineEnd; i++) {
      if(!isShift) {
        lines[i] = tabSpace + lines[i];
        if(i == lineStart){
          slct.left += tabLength;
        }
          slct.right += tabLength;
      } else if(lines[i].substr(0, 1) === tabSpace.substr(0, 1)) {
        lines[i] = lines[i].substr(tabLength);
        if(i === lineStart) {
          slct.left -= tabLength;
        }
        slct.right -= tabLength;
      }
    }
    elm.value = lines.join('\n');
  }
  elm.setSelectionRange(slct.left, slct.right);
}








$(function(){
  $('<textarea>').on('keydown', function(e){
    var ele = $(this)[0];
    inputTabKeyFor1Line(e, ele);
  }).css({width:'90%', height:'200px'}).text('Please enter tab key.').appendTo('#demo');

  var sampleJsonLiteral = `
{
  key: "a",
  val: "b",
}
`;
  $('<textarea>').on('keydown', function(e){
    var ele = $(this)[0];
    inputTabKeyForMultiLine(e, ele);
  }).css({width:'90%', height:'200px'}).text('Please enter tab key.\n for multi line\n' + sampleJsonLiteral).appendTo('#demo');

});




//http://demo.laineus.com/textareaindent/
//https://github.com/julianlam/tabIndent.js/blob/master/js/tabIndent.js

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-textarea-input-tab/