ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

intputタグのtype属性でtelを指定して起きたこと

inputタグのtype属性には、さまざまな値が指定できます。
developer.mozilla.org

指定できる値には、telがあり、電話番号を入力するために指定します。

電話番号なので、数字とハイフン(-)が許容されると思っていました。
数字とハイフンが入力されているかどうか、というチェックも作っていました。

iPhoneSafariで試してみると、数字入力のキーボードに切り替わります。
iPhone標準の数字入力キーボード
入力できるのは、数字と記号の+*#だけです。
ハイフンは入力できません。

ハイフンが入力できないので、入力チェックでエラーになってしまいました。
対処として、入力された値からハイフンを除去して、数字のみが入力されているかチェックするように変更しました。

iPhoneの標準のキーボードでは、以前から変わらず、ハイフンは入力できないようです。
qiita.com
iPhoneの標準のキーボードを考慮す宇rと、電話番号の入力は、ハイフン抜きの数字だけをしてもらうようになっていくんでしょうね。