テキストエリアでタブを入力できるようにする
長文やコードをテキストエリア入力している時、tabキーを入力すると本当はtabを入力して欲しいのに～って時のJavascriptでの対処方法。
サンプル&コード
簡単解説
タブを入力するロジック自体は簡単なものなのですが、下記のソースのハイライトになっている箇所が重要な箇所です。1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | $(function(){ // 文字入力ファンクション function addStr(id, str){ var obj = document.getElementById(id); // オブジェクト取得 var sPos = obj.selectionStart; // 文字入力最初位置取得 var ePos = obj.selectionEnd; // 文字入力最後位置取得 // 指定された文字を入力する var addStr = obj.value.substr(0, sPos) + str + obj.value.substr(ePos); var cPos = sPos + str.length; jQuery(obj).val(addStr); // 対象の値を変更 obj.setSelectionRange(cPos, cPos); // 文字選択状態を初期の状態へ } $("textarea") // フォーカス時の設定 .focus(function(){ window.document.onkeydown = function(e){ if(e.keyCode === 9) { // 9 = Tab addStr(this.activeElement.id, "\t"); // \t = タブ e.preventDefault(); // デフォルト動作停止 } } }) // フォーカスが外れた時の設定 .blur(function(){ // 通常の動作を行うように再設定 window.document.onkeydown = function(e){ return true; } });}); |
その後、フォーカスが外れた時の動作（27～29行目）で通常の動作を行うように再設定を行っています。
これでtabのデフォルト動作を制御しています。
