SmallStyle

_ Enter キーを押したら次のフォームへ Focus を移動

…なんて要望がきた．もともと 5250 エミュレータなんかを使っていた人にとっては，この Enter キーで Focus を移動することが普通みたい．ちなみに Focus が移ったときは，フォーム内にすでに文字列があった場合は選択されていて，内容を変更しない場合はクリアするとか．あの黒い画面になじみの薄い私にとっては，ブラウザでそんな挙動をされた日には，二度と使うかこんなシステム，とか思ってしまいそうです．

UFJ のオンラインバンキングで契約番号を入力する部分も，規定の桁数を入力すると勝手に次の入力フォームに Focus を移してくれる（IEのみ）．フォームの入力項目の移動には Tab キーを使う人なので，勝手に Focus を移動されるのはなんか気持ち悪い．

と，まぁそんなことを思いながらも，一応，JavaScript でできることは確認しておこうと，誰かが置いてった JavaScript 辞典を片手にごりごりと書いてみる．

<script language="JavaScript"><!--
//カウンター
var c = 0;

//最初の入力フィールドに Focus
function init() {
   document.forms[0].elements[0].focus();
   document.forms[0].elements[0].select();
}

//Enter押下時
function moveFocus() {
   if (event.keyCode == 13) {

      //type='text'のみ対象
      if (document.forms[0].elements[c].type == 'text') {

         //デフォルトの値と変わってなければ値を消す
         if (document.forms[0].elements[c].value == document.forms[0].elements[c].defaultValue) {
            document.forms[0].elements[c].value = "";
         }

         //カウントアップ
         c++;

         //次の element も text なら選択
         if (document.forms[0].elements[c].type == 'text') {
            document.forms[0].elements[c].select();
         }
      } else if (document.forms[0].elements[c].type == 'button') {
         //ボタンにきたら送信
         document.forms[0].submit();
      }
   }
}
document.onkeydown=moveFocus;
window.onload=init;
//-->
</script>

ちなみに IE でのみ動作可．ボタンの type 属性が submit の場合は 入力エリアで Enter キーを押すと，即 submit される．そんなわけで，type 属性が button な送信ボタンを作成して，即 submit は回避．でも，今回のプロジェクトで採用しているフレームワークでは，ボタンは type 属性が submit のものしか生成できないから，やっぱり利用できない．

あと，Enter キーを押すことでカウントアップさせているので，Tab キーでの遷移と併用するとおかしな挙動をとるから，とてもじゃないけど使い勝手がよくなるとは思えません．

と，いうわけで，この要望はフレームワークの縛りと，一般的な動作ではないということで却下．