【JS】type=tel と type=number で入力の時の動作が別物だった件

ご存知でした?『転スラ』とは、『転生したらスライムだった』ではなくて『転生したらスライムだった件』なんですよ。件が要るんですよ。件。
というわけで、『type=tel と type=number で入力の時の動作が別物だった件』です。

HTMLのinputタイプで、telとnumberなら、電話番号と数値なので、どっちも半角数値が入るんでしょ!っていう思い込み

まず type=tel です。半角全角すべて入力できます。イベントリスナーでも入力した値がすべて取得できるので、不要な値が入力されたら削除し、全角は半角にして返すなどができますね。

tyep=”tel”:

入力内容がここに表示されるよ

次は type=number です。入力できるのは半角数値のみです。半角数値以外の値は取得できません。取得できないので、全角数値が入力されたら半角数値にして返す、できません。

type=”number”:

入力内容がここに表示されるよ

これって、この2つのタイプが同じフォームにあったら、入力する側からしたら、同じ数値なのに、上は全角でも大丈夫なのに、下は全角だと消えちゃう・・という謎仕様でしかないような・・(´・ω・`)

半角数値以外の値は取得できませんが、validityプロパティ で、入力された値が「半角数値かそれ以外の値か」は取得できます。

type=”number”:

入力内容がここに表示されるよ

もし、一つのフォーム内で、電話番号と数値の入力が存在するのであれば、何らかの対応を入れた方が良さそうです。