3月 272014
 

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

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);
}
});
});
“`

ではではー。

Pocket

 Posted by at 3:06 PM

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*