×

【HTML・JavaScript】入力フォームへできる限り半角数字のみ入力可能にする方法

2017年1月15日 コーディング

数字だけ

Webページ上に入力フォームを設置する際に、数量や金額を入力させたいということがありますね?

さらにユーザビリティ的に半角数字のみ入力可能にしたいですね?

というわけで、入力フォームへできる限り半角数字のみ入力可能にしてみます。
※無限に数字が入力できても仕方ないので、今回は数字9桁まで入力可という制限を設けることにします。

まずはHTMLとCSSだけで半角数字のみ入力可能にしてみる

HTML5からinputタグにtype=number属性が追加され、数値のみ入力可能になります。


お、解決じゃん!

と、思うじゃないですか?

スピンボタン

ところがtype=numberでは、上のようなデフォルトでスピンボタンと呼ばれる、数値入力を補助してくれるボタンが表示されるのです。

スピンボタンをそのまま表示させても良いならこれで問題解決なのですが、見た目デフォルト感が強く、スピンボタン自体不要な場合もあります。

そこで、CSSでスピンボタンを表示させないようにします。

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type="number"] {
	-moz-appearance:textfield;
}

これでスピンボタンは非表示になりました。

よし、解決!

ではないんですね。

リセットボタン

IEで入力フォームを見るとリセットボタン(入力した値を空にする)が表示されています。

値を入力するとリセットボタン(×ボタン)が表示されるので、CSSで非表示にします。

input::-ms-clear {
	visibility:hidden
}

これでリセットボタンは非表示になりました。

よし、今度こそ解決だ!

と思ったら大間違いです。

IEやFirefoxで文字を入力すると半角数字以外の文字も入力できてしまいます(2017年1月現在)。

ブラウザで仕様を統一しろよ(怒)!

文句たれてもしょうがないので、どうにかしましょう。

JavaScriptで入力フォームへできる限り半角数字のみ入力可能にしてみる

HTMLとCSSだけではブラウザによって動作に違いが出てしまうので、今回は、input:type=textとJavaScriptを使って半角数字のみ入力可能にしてみます。
(input:type=numberだとデバイス・ブラウザによって動作がバラバラになってしまうため)

DEMOをクリックして動作を確認してください。

DEMO

半角数字以外は入力できないようにしています。

【PC】
Chrome
Firefox
Internet Explorer
Safari

【スマートフォン】
Android(デフォルトブラウザ、Chrome、Firefox)
iPhone(Safari、Chrome)

上記ブラウザ(2017年1月時点の最新版)のみ動作確認しました(OSのバージョンとかでも動作違ってくるかもしれません)。

HTMLの記述

記述するHTMLは下記のとおりです。inputタグでtype=”text”を設定しています。


スマホで数字キーボードを表示させる
pattern=”\d*”と記述することで、スマホで数字のキーボードを表示させることができます。

コピー&ペースト禁止
直接入力時に半角数字のみ許可しても、それ以外の文字列をコピペされては意味がありません。

inputタグに対して、oncopy=”return false”(コピー禁止)、onpaste=”return false”(ペースト禁止)を設定してコピペ不可にします。

半角数字のチェック
onInput=”check_numtype(this)”で入力された文字列が半角数字かどうかをチェックします。

onInputでキーボードで入力を行ったタイミングでcheck_numtype関数(後述)を走らせています。

その他(必要であれば記述する)
onblurで入力フォームからフォーカスが外れたタイミングでchekck_code関数(後述)を走らせています。

全角モード禁止(IEのみ)
CSSで入力フォームに対してime-mode:disabledを指定すると、全角モードでの入力を禁止(半角のみOK)することができます。

JavaScriptで入力文字をチェックする

次に、JavaScriptで入力文字のチェックを行います。
先述しましたが、入力文字のチェック関数として、check_numtypeという名前の関数を用意します。

// 1.グローバル変数(一時的に保存しておく)を宣言
var _return_value = "";

// 入力値の半角数字チェック
function check_numtype(obj){

	// 2.変数の定義
	var txt_obj = $(obj).val();
	var text_length = txt_obj.length;

	// 3.入力した文字が半角数字かどうかチェック
	if(txt_obj.match(/^[0-9]+$/)){
		// 3.1.文字数チェック
		if(text_length > 9){
			$('input[name="price"]').val(_return_value);
		}else{
			_return_value = txt_obj;
		}
	}else{
		// 3.2.入力した文字が半角数字ではないとき
		if(text_length == 0){
			$('input[name="price"]').val("");
			_return_value = "";
		}else{
			$('input[name="price"]').val(_return_value);
		}
	}
}

1.グローバル変数(一時的に保存しておく)を宣言
まずは、グローバル変数(_return_value)を空で宣言しておきます。

この変数はキーを入力する直前の値を一時的に保持しておくために用意します。

2.変数の定義

ここからcheck_numtype関数の中の処理になります。

check_numtype関数へ入力フォームを引数として渡す(上記でいうとobj)ことになります。

txt_obj:入力フォームの値
text_length:入力フォームの値の文字数

3.入力した文字が半角数字かどうかチェック
入力されている文字が半角数字かどうか、match()と正規表現を使ってチェックします。

3.1.文字数チェック
入力されている文字が半角数字の場合、今回の文字数上限9桁を超えていないかをチェックします。
超えていたら、入力されている値を上限桁を超える直前の文字列に置き換えます。

上限を超えていなければ、_return_valueに一時的に入力されている値を保存します。

3.2.入力した文字が半角数字ではないとき

入力した文字列が半角数字ではない場合の処理です。

入力されている文字数が0のとき、つまり、backspaceやdeleteなどで文字を消して入力フォームが空になった場合、_return_valueを空にします。

半角数字以外の文字が入力された場合、入力されている値を上限桁を超える直前の文字列に置き換えます。

まとめ

主要ブラウザとAndroid・iPhoneだけですが、できるだけ半角数字だけ入力可能にしてみました。

さらに入力時の制御に加えて、フォームをサブミットするときに再度半角数字かどうかのチェック(二重チェック)をしてあげるとベターです。

非常に面倒ですね。
すべてのブラウザ・デバイスで試したわけではないので、環境によってはうまく動作していない可能性は十分あります。

input=”number”のブラウザ、デバイス、OSでの仕様統一が早急に望まれます(難しいでしょうが…)。

関連記事