長文やコードをテキストエリア入力している時、tabキーを入力すると本当はtabを入力して欲しいのに～って時のJavascriptでの対処方法。

サンプル&コード

簡単解説

タブを入力するロジック自体は簡単なものなのですが、下記のソースのハイライトになっている箇所が重要な箇所です。

$(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;
        }
    });
});

20行目でデフォルトの動作を停止させているので通常のtab押下時の移動の動作を制御しています。
その後、フォーカスが外れた時の動作（27～29行目）で通常の動作を行うように再設定を行っています。
これでtabのデフォルト動作を制御しています。



«前の記事：cronのログを日付ごとに出す方法テキストエリアでキーの同時押しを判定する方法：次の記事»