テキストエリアでtabキーを押された時、tabキーとしての動作をさせるjavascript

スポンサーリンク

こんにちは。ファガイです。

textarea要素ってありますよね。
そのtextarea要素なのですが、tabキーを押すとフォーカスが変わってしまいます。

フォーカスを変えずに、tabキーを挿入したいので、色々検索しつつ、書いてみた。

環境

・jQuery1.11
・GoogleChrome 33及び、FireFox 27、IE 11(互換10,9)にて動作を確認致しました。
IE8ではsetSelectionRangeが無いため、tabの動作はしますが、カーソルが動きません。

クロスブラウザ対応を行うためには、IE8以下だとcreateTextRange()を呼び出し、moveメソッドで移動出来るのかな?

$(function(){
    $("textarea").on('keydown', function(e) {
        // tabキー押下時の対応
        if (e.which == 9 || e.keyCode == 9) {
            e.preventDefault();
            var pos = this.selectionStart;
            var text = $(this).val();
            // tabの挿入
            $(this).val(text.substr(0,pos) + '\t' + text.substr(pos, text.length));
            // カーソルの場所を移動
            this.setSelectionRange(pos + 1, pos + 1);
        }
    });
});

ではではー。

コメント

タイトルとURLをコピーしました