フォームのテキスト入力を半角文字のみ許可する方法

HTMLフォームから入力を受け付ける際に、日本語などの全角文字が入力されると不都合がある事もあるかと思います。
例えばIDやパスワードといった部分等は数字とアルファベットといった半角文字であった方が都合が良い場合です。
 

そこでテキストエリアとテキストボックスで半角文字だけが入力されるようにする方法を紹介します。

テキストエリア・テキストボックス

まず通常のテキストエリア・テキストボックスを表示する方法です。
 
テキストボックス

<input type="text">

テキストエリア

<textarea rows="2"></textarea>

このタグを貼るとそれぞれテキストエリア・テキストボックスが表示されます。
 
テキストボックス

 
テキストエリア

IEなら

IE（インターネット・エクスプローラー）なら簡単に設定する事ができます。
 

テキストボックス

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

 

テキストエリア

<textarea rows="2" style="ime-mode:disabled;"></textarea>

実際に実行してみると…

 
テキストボックス

 
テキストエリア

これで全角文字を入力しても何も入力されなくなります。
しかし、これが対応しているのはIEだけのようです。
IE独自仕様の為だそうで、他のブラウザでは全角文字が入力されてしまいます。

IE以外のブラウザなら

GoogleChrome等の他のブラウザでは”ime-mode:disabled;”は使えません。
そこでJavaScriptで制御します。

<FORM>
テキストボックス
<input type="text" value="" onInput="checkForm(this)">

テキストエリア
<textarea rows="2" onInput="checkForm(this)"></textarea>
</FORM>

<script type="text/javascript">
<!--
function checkForm($this)
{
	var str=$this.value;
	while(str.match(/[^A-Z^a-z\d\-]/))
	{
		str=str.replace(/[^A-Z^a-z\d\-]/,"");
	}
	$this.value=str;
}
//-->
</script>

このJavaScriptは文字を入力された部分を判定します。
「数字」「A～Z」「a～z」「-」以外の文字が入力されていたら、その文字を削除します。
全角文字を貼り付けしても全角文字のみを消去します。

テキストボックス

テキストエリア

HTML5以降で数値限定なら

HTML5以降なら数値を入力できるタグが追加されました。

<FORM>
数値<input type="number" name="number">
</form>

数値

右側に数値が変更されるボタンがあります。
上側なら数値が上がり、下側なら数値が下がります。
ただし、ボタン変更では整数になります。