<input type="number">で先頭以外にハイフン(-)を入れると空文字判定になる

2022-03-04

フォームの郵便番号欄などで､<input type="number">を使うのには､ちょっと注意が必要 というお話｡

例えばこうして

<input id="zip" type="number">

こうやってJSで整形しようとしたとき

$("#zip").on("input", function(){
	var val = $(this).val();
	var replace = val.replace(/\+|\./g, ""); //プラスやドットは消す
	$(this).val(replace);
});

このような入力があった時

「$(this).val();」は空文字と判定されます｡

<input type="number">を使うと､先頭以外にハイフン(-)を入れると､JSで空文字判定になってしまうのです｡

再現

下記フォームに途中にハイフン(-)を含んで入れてみてください｡

※Androidの方はテンキーなので無理かも

inputの値 ($(this).val()) ：

途中にハイフンを入れると空文字判定になるのが確認できたでしょうか？

という訳で､ハイフンを含むような項目かつ､JSで整形を行なう項目には<input type="number">は使わないほうが良いです｡

<input type="tel"> か､

<input type="text" inputmode="numeric"> を使いましょう｡

スマホでテンキーになりますし､郵便番号であれば<input type="tel" autocomplete="postal-code">

などとすれば自動入力にも支障ありません｡

type="number"は元々数値を入力するためのものなので「12」とか「-12」などの入力を想定しており「12-23」みたいのは想定外なのかもしれませんね｡

ちなみに､こちらの記事で
フォームの住所の自動補完について考察してますので､よければご覧ください｡

ややこしい､フォームで使える住所系autocomplete属性の一覧と解説

お役に立てましたら応援をお待ちしております！
頂いた応援は子育てに活用させていただきます｡

または以下のボタンからなにか買って応援 (PR)

Amazonのアソシエイトとして「けん」は適格販売により収入を得ています。