Tabキーによるフォーカスとマウスクリックによるフォーカスを区別したい
<input type="text">
で作成したテキストボックスのfocus
イベントで、Tabキーでフォーカスした場合と、マウスクリックでフォーカスした場合を区別したいです。
やりたいこと
整数をカンマ区切りで表示するテキストボックスを作ります。
Excelと同様、フォーカスが入ったらカンマを消し、フォーカスが外れたらカンマを挿入します。
マウスクリックでフォーカスしたら、カーソルをクリックした位置に設定します(Excel同様、カンマが消えた分、ずれてしまいますが、それは許容します)。
Tabキーでフォーカスが入った場合には、テキストボックス内の文字列を全て選択状態にします。
マウスクリックでは「クリックした位置にカーソルセット」
Tabキーフォーカスでは「文字列を全選択」
これは、<input type="text">
でテキストボックスを作れば、デフォルトでそのように振る舞う、普通の仕様です。
問題
フォーカス時にカンマを消す処理は、jQueryを使って
var value = $('#text').val().replcae(/,/g, '');
$('#text').val(value);
のように処理しています(実際のものとは若干異なりますが、jQueryのval
メソッドで置換していることは同じで、そこが本質だと思っています)。
ただ、こうすると、テキストボックス内の文字列を選択していても、選択が解除されてしまいます。
そのため、「もしTabキーによってフォーカスされたら、jQueryのselect
メソッドを呼んで、選択状態にする」という処理を作りたいのです。
何か方法は無いでしょうか?
同じ目的が達成できれば、別のアプローチでも構いません。