w2uiのグリッド(w2grid)ではセルにeditable
属性が指定されていれば、セルのダブルクリックで入力モードに変化します。また、セル選択状態であれば、キーを入力するだけで自動的に入力モードになり、データを入力することができます。
しかし、テンキーからデータを入力する場合、入力モードになりません。テンキー入力もQWERTYからと同様に入力すると入力モードに変化させるにはどうすればよいでしょうか。今回はその対処方法を説明します。
なお、w2ui-1.4.3.js
ではテンキーでの入力はできませんでしたが、w2ui-1.5.rc1.js
ではテンキーでの入力が可能でした。w2ui-1.5.rc1.js
を利用している場合は対応不要です。
処理を確認
キーの入力を判定し、編集モードに以降している処理を探したところ、w2ui-1.4.3.js
では、ll.4185-4195
で判定しているようです。その部分を抜き出したのが下記のソースです。
var tmp = [187, 189, 32]; // =-spacebar
for (var i=48; i<=90; i++) tmp.push(i); // 0-9,a-z,A-Z
if (tmp.indexOf(key) != -1 && !event.ctrlKey && !event.metaKey && !cancel) {
if (columns.length == 0) columns.push(0);
var tmp = String.fromCharCode(key);
if (key == 187) tmp = '=';
if (key == 189) tmp = '-';
if (!shiftKey) tmp = tmp.toLowerCase();
obj.editField(recid, columns[0], tmp, event);
cancel = true;
}
key
には押されたキーのコードが入っています。ですので、3行目のif (tmp.indexOf(key)~) {
で押されたキーがtmp
に定義されているかを判定しているということになります。
では、tmp
には何が入っているでしょうか。1行目で[187, 189, 32]
を格納しており、その後に"48~90
"までの値を追加(push)しています。
テンキーのキーコードは0~9
は96~105
、*
は106
、+
は107
、-
は109
、.
は110
、/
は111
がそれぞれ割り当てられています。つまり、tmp
にテンキーのキーコードが含まれていないので、反応しなかったということになります。
tmp
にテンキーのキーコードを追加してしまいましょう。
※w2ui-1.4.3.js
ではll.4186-4187
間に挿入
var tmp = [187, 189, 32]; // =-spacebar
for (var i=48; i<=90; i++) tmp.push(i); // 0-9,a-z,A-Z
for (var i=96; i<=111; i++) tmp.push(i); // numeric keypad 0-9
if (tmp.indexOf(key) != -1 && !event.ctrlKey && !event.metaKey && !cancel) {
if (columns.length == 0) columns.push(0);
正しいキーコードを設定
これで完了と思いきや、実際に試してみると正常に動きません。テンキーで"1"を入力すると確かに入力モードに変化して、文字が入力されますが、表示される文字はa
です。続けて数字を入力すると正しい数字が入力されますが、セルを移動して入力すると、1文字目は必ずその数字に対応したa~o
の文字が表示されてしまいます。何故でしょうか。
実は5行目のvar tmp = String.fromCharCode(key);
が原因です。テンキーのキーコードは96~111
の範囲です。その数値にString.fromCharCode
を使うと、文字コードに対応した文字が返ってきます。例えば"1"を打つとキーコード97
が渡り、String.fromCharCode(97)
となりますので、結果は"a"になります。
※String.fromCharCode(97)
が"a"になる理由はこちらの一覧ご覧ください。
そこで、数字についてはString.fromCharCode
の前で処理します。
※w2ui-1.4.3.js
ではll.4188-4189
間に挿入
if (tmp.indexOf(key) != -1 && !event.ctrlKey && !event.metaKey && !cancel) {
if (columns.length == 0) columns.push(0);
if (key >= 96 && key <= 105) key -= 48; // numeric keypad 0-9
var tmp = String.fromCharCode(key);
続いて数字以外の文字に対しては個別に対応します。
※w2ui-1.4.3.js
ではll.4191-4192
間に挿入
if (key == 187) tmp = '=';
if (key == 189) tmp = '-';
if (key == 106) tmp = '*'; // numeric keypad *
if (key == 107) tmp = '+'; // numeric keypad +
if (key == 109) tmp = '-'; // numeric keypad -
if (key == 110) tmp = '.'; // numeric keypad .
if (key == 111) tmp = '/'; // numeric keypad /
if (!shiftKey) tmp = tmp.toLowerCase();
完了
最終的に下記のようになります。この状態で試すとテンキーのどのキーを押しても正しく入力出来るようになっています。
var tmp = [187, 189, 32]; // =-spacebar
for (var i=48; i<=90; i++) tmp.push(i); // 0-9,a-z,A-Z
for (var i=96; i<=111; i++) tmp.push(i); // numeric keypad 0-9
if (tmp.indexOf(key) != -1 && !event.ctrlKey && !event.metaKey && !cancel) {
if (columns.length == 0) columns.push(0);
if (key >= 96 && key <= 105) key -= 48; // numeric keypad 0-9
var tmp = String.fromCharCode(key);
if (key == 187) tmp = '=';
if (key == 189) tmp = '-';
if (key == 106) tmp = '*'; // numeric keypad *
if (key == 107) tmp = '+'; // numeric keypad +
if (key == 109) tmp = '-'; // numeric keypad -
if (key == 110) tmp = '.'; // numeric keypad .
if (key == 111) tmp = '/'; // numeric keypad /
if (!shiftKey) tmp = tmp.toLowerCase();
obj.editField(recid, columns[0], tmp, event);
cancel = true;
}
冒頭でも書いたとおり、w2ui-1.5.rc1.js
ではこの問題は解消されています。w2ui-1.4.3.js
を利用している場合はお試してみてください。
今回説明で利用したソースはこちらにあります。
参考サイト
文字コードの一覧は下記サイトにまとめられています。http://www.w3ii.com/ja/charsets/ref_utf_basic_latin.html
キーコード一覧
http://www.programming-magic.com/file/20080205232140/keycode_table.html