入力された英数字を半角にする

WebサイトでINPUT要素で入力される文字列において、英数字を半角にしてほしいというケースがあります。注意書きで半角で入力してもらいたい旨を記述しておけばよいのですが、それでもうっかりと全角で入力してしまう人がいるかもしれません。そこでサイト側で対応をしてみることを検討してみましょう。

IE向けの対策

Internet Explorer向けの対策は非常に簡単です。全角入力をできないようにすることができますから。対応の仕方は簡単で、style属性でime-mode:disabledを記述するだけです。これで該当部分には全角入力ができなくなります。

<input type="text" name="xxxx" value="" style="ime-mode:disabled;">

JavaScriptで半角変換

FirefoxなどのInternet Explorer以外のブラウザも考慮し、JavaScriptで入力された文字を変換していくという手段も併用することが望ましいと思います。そのような場合にはJavaScriptを使えば負荷のかかるサーバー側で処理をしなくてもクライアント側で処理が可能です。

<script type="text/javascript">
function chkCode(id) {
  work='';
  for (lp=0;lp<id.value.length;lp++) {
    unicode=id.value.charCodeAt(lp);
    if ((0xff0f<unicode) && (unicode<0xff1a)) {
      work+=String.fromCharCode(unicode-0xfee0);
    } else if ((0xff20<unicode) && (unicode<0xff3b)) {
      work+=String.fromCharCode(unicode-0xfee0);
    } else if ((0xff40<unicode) && (unicode<0xff5b)) {
      work+=String.fromCharCode(unicode-0xfee0);
    } else {
      work+=String.fromCharCode(unicode);
    }
  }
  id.value=work; /* 半角処理のみ */
  //id.value=work.toUpperCase(); /* 大文字に統一する場合に使用 */
  //id.value=work.toLowerCase(); /* 小文字に統一する場合に使用 */
}
</script>

まずは上記のJavaScriptをHTMLファイルの</head>直前にでも記述しておいてください。外部ファイルから読み込ませても構いません。入力された数字、英大文字、英小文字をそれぞれ半角に変換しているScriptです。最後のほうは//でコメントアウトしていますが、必要ならば//を除去してコメントアウトされている部分を有効にし、英文字を大文字あるいは小文字に統一することもできます。このへんはサイト側の都合で変更してください。

次にINPUT要素にJavaScriptの呼び出しイベントを記述します。キーボードから文字が入力されたことを検出するには、onkeyupイベントを利用するとよいでしょう。onkeyup属性でchkCode(this)を記述してJavaScriptを実行します。

Operaはonkeyup属性でIMEの入力を感知できないため、Operaにも対応したい場合はonchange属性かonblur属性のどちらかにchkCode(this)を記述しておくとよいでしょう。そうすればユーザーが入力を終えて別のことを行なう際（どこかをクリックしたときなど）に実行されます。

<input type="text" name="xxxx" value="" onkeyup="chkCode(this);" style="ime-mode:disabled;">

テスト用INPUTフォーム（英数字を半角化して英文字を大文字に変換処理するケースのサンプル）

現状ではGoogle ChromeとSafariではうまく動作しません。WebKit系のイベント処理は変なクセがありますね……。Scriptの処理自体はテキスト変換で動作しているので、イベント部分の問題なのは間違いないと思うんですけど。