jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

フォームの入力を数値に限定、かつスマートフォンでは数字キー入力にする

2016年7月22日
この記事は掲載から369日経過しています。
情報が古い可能性が有りますのでご了承下さい

かなり凝ったオーダーフォームの制作案件で、郵便番号や電話番号等をバリデーションで数値に制限(数値以外はエラーを出す)するのではなく、入力そのものを数値に限定したいとのご要望が有り、少し考えてみました。

先ず、HTML5の場合はインプットのタイプでnumberを指定する事が出来ます。メーカーや端末、ブラウザによって対応が違うようですが、スマートフォンではテンキーが出てくるので入力が楽になります。

ただ、パソコンの場合、ブラウザの対応によって余計な上下アイコンのようなものが横に付いてしまいます。

img

作成しているオーダーフォームはレスポンシブデザインなので、プラットフォーム別にUIを用意するのは面倒です。

どうにかならないか?と考えた結果、PCの場合はJavascriptで数値キー以外を無効化し、スマートフォンの場合はinput typeを変更する、という方法にしました。

もちろん、上述したようにスマートフォンによっては対応出来ないケースもあるようなので、完全では有りませんが。

サンプル

PCとスマートフォンの判定はUAを見て分岐する方が確実ですが、これは単純にブラウザの幅によって変更しています。

一応手持ちの端末では期待した動作はしますが、HTML5自体がブラウザによって対応がまちまちなので、参考程度に。

 

  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP