iframeのdesign-modeを使ってグラフィカルなWEBソース入力をする場合は気にしなくてもいいんですが、多くのWEBエンジニアがシステム管理画面や掲示板などの文字入力を行うWEBシステムを作る時にtextareaタグを使って構築すると思いますが、
ほとんどのPCブラウザの仕様で「tabキー」を押すと、次の入力フォームにフォーカスが切り替わってしまいます。
スマホの様に次のフォームに移り変わるボタンがあれば良いんですが、古くからの仕様で未だに変更されずに生き残っています。
tabキーの項目切り替えの是非
そもそもPCブラウザってなんでtabキーの挙動がこのようになっているんでしょう？？？
[ ショートカット ] 項目間の移動には「Tabキー」で! タブを切り替えるショートカットも
実はPCブラウザの仕様ではなく、そもそもはOSの仕様だったんですね。
でも、全ての箇所というわけではなく、やはり入力箇所やボタンなどのフォーカス切り替えのようです。
確かに便利なんですが、用途はケースバイケースですよね。
ブラウザ内のtextareaがText-Editorモードになる場合は、タブキーは¥tの入力にならないと、やっぱり使いづらいです。
だって、タブ文字が入力ができないですからね。
対応ソースコード
ページ内のtextareaタグに対して、tabキーを押した時にtab文字を挿入して、カーソル位置を都度調整するようにしています。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="tabInput.js"></script>
</head>
<body>
<p>入力1</p>
<textarea style="width:200px;height:200px;"></textarea>
<p>入力2</p>
<textarea style="width:200px;height:200px;"></textarea>
</body>
</html>
(function(){
var $$ = function(){
this.setEvent(window , "DOMContentLoaded" , this.set);
};
$$.prototype.set = function(){
var textareas = document.getElementsByTagName("textarea");
for(var i=0; i<textareas.length; i++){
$$.prototype.setTextarea(textareas[i]);
}
};
$$.prototype.setTextarea = function(elm){
elm.onkeydown = function(event){
if(event.keyCode !== 9){return}
var textarea = event.target;
var sentence = textarea.value;//全部文字
var len = sentence.length;//文字全体のサイズ
var pos = textarea.selectionStart;//選択している最初の位置
var before = sentence.substr(0, textarea.selectionStart);
var after = sentence.substr(textarea.selectionEnd, len);
var word = "\t";
sentence = before + word + after;
textarea.value = sentence;
textarea.setSelectionRange(len+1 , pos+1);
return false;
};
};
$$.prototype.setEvent = function(target, mode, func){
//other Browser
if (target.addEventListener){target.addEventListener(mode, func, false)}
else{target.attachEvent('on' + mode, function(){func.call(target , window.event)})}
};
new $$;
})();
画面イメージ
これからは怖くない文字入力システム
今回はTextareaタグ全てに対応させましたが、任意のタグに対応させるには、ID値やclass値を使って条件を付けて「tabIndex.js」の８行目から１０行目当たりにif分を書くことで対応できるでしょう。
それから、今回のソースコードは下記のブラウザで動作確認しております。
Mac Chrome バージョン: 60.0.3112.101
Mac Safari バージョン10.1.2
Mac Firefox 52.0.1
Mac Opera 45.0
windowsブラウザは確認できていないので、もし不具合があれば、連絡ください。
今回の「tabInput.js」を使いたいtextareaタグがあるWEBページ内のどこでもscriptタグを貼り付ければ実装できるようにしています。
<script src="tabInput.js"></script>
簡単解説
今回のJSソースコードについて簡単に解説します。
まず、ページ内のどこにタグを貼り付けても動作できるように、"DOMContentLoaded"イベントで起動できるように、しています。
さらに、プログラム全体を無名関数にして他のどのプログラムにもコンフリクトを発生させないようにしています。
ただし、textareaタグのonkeydownイベントを使っているシステムの場合は、今回のプログラムでイベントを上書きしてしまうので、気になる人は、addEventListenerに置き換えてあげるといいかもしれませんが、処理内の「return false;」がうまく機能しなくなるかもしれないので、自己責任にてお願いします。
あと、tabキーのkeyCodeは「9」とのことですが、これはmacの日本語キーボードで確認しているので、他の環境ではコード番号が違う可能性もあります。
これももし動作しない環境があれば、教えてください。
一番実装に手間取ったのは、tab文字列を挿入した後で、カーソルをtab文字列の後ろに移動させる処理が困難でした。
仕組みを説明すると、tabキーを押した時に、その時のカーソル位置を求めて、それ以前の文字とそれ以後の文字を取り出し、
カーソル以前の文字列 + tab文字列 + カーソル以後の文字列
上記文字列を該当のtextareaタグのvalueに対して書き換えているだけなんですね。
そして、元々のカーソル位置の１バイトシフトした位置にカーソルを設置するという事で、他ブラウザの挙動が心配なんですが、最新の書き方をしておきました。
もしかしたらIEでは動かないかもしれないので、どうしてもIEで使いたい人はご連絡ください。
修正後のソースを教えてくれてもいいですよ。
いかがでしたか？こうした機能をデフォルトで使うことで、実際のシステム利用の効率がアップすると思いますよ。
0 件のコメント:
コメントを投稿