view source

JavaScript

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

CSS

HTML

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

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

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。