ちょっとしたUIの改善とか（固定桁入力編）

http://d.hatena.ne.jp/naoya/20051012/1129121627

　確かにウェブのユーザビリティはイマイチで、なんとかならないのかなー、と思う。

　例えば、

〒-

カード番号---

――みたいなフォームがあったとして、これがWindowsのアプリケーションなら郵便番号を３桁（４桁）入力したら、あるいはカード番号の４桁を入力したら、自動的に次の入力フォームに移るのが多いでしょ。でも、ウェブでそういうことをやってるトコはあまり見かけない。

　どこかでそれをやってて、「そうそう、これだよ」とか思ったくらいだし。

　でまあ、そんなに労力をかけずに作れるんじゃね？　とか思ってスクリプトを書いてみたのさね。

function toNext (input, nextname) {
  if (input.value.length < input.getAttribute('maxlength')) return;

  if (nextname == null) {
    input.name.match( /([a-zA-Z]+)(\d+)/ );
    nextname = RegExp.$1 + (Number(RegExp.$2) + 1);
  }

  var next = document.forms[0].elements[nextname];
  if (next != null) {
    next.focus();
    if (next.type == "text") next.select();
  }
}

　とりあえずは動くんでいいんだけど、問題が２つある*1。

　ひとつはフォーカスの移動がダサイ点。

　たいていのブラウザでは[Tab]キーを押せば次のtabindexに飛ぶわけで、たぶんスクリプト側で簡単に呼び出す方法がある気がするんだけど、僕が探した範囲では見つからなかった。ので、上のようにダサイ方法を使ってる。

　もうひとつはちょっと致命的で、例えば[Shift]+[Tab]で戻ったり、あるいはカーソルキーを押したりしても次の入力フォームに移動しちゃうのだ。

　いちおう解決方法として、event.keyCodeをチェックするとかあるんだけど、どうやら全てのブラウザで使える方法じゃないらしい*2。

　単にコントロールコード系のキーが押されたら無視できればいいんだけど。なんかいい方法はないっすかね？

　ついでにモバイル系以外でもistyleみたいなのが使えるようになればいいんだけど。そういうのって規格化されてないんでしょーか。

（つづく）

*1：というか、もっとまともなのを誰か作ってそうだから、それがどこにあるのか知ってる人がいましたら教えてください。おねがい。

*2：Internet ExplorerとOperaではできた。Firefoxではできなかった。