こんにちは。ファガイです。
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);
}
});
});
ではではー。
コメント