PC版のWebサイトのテキストボックスにも[type=”tel”]と[type=”email”]を使おう

PC版のWebサイトのテキストボックスにも[type=”tel”]と[type=”email”]を使おう

こんにちは、Webエンジニアのtrrn(呼称:てらりん)です。

先日、ロッキンに参戦してきました!曇りで夕方はちょっと寒いくらいでしたが、去年初参戦したロッキンよりはるかに過ごしやすかったです_(:3」∠)_<サイコー
先週は一週間基本雨でだいぶ涼しかったのですが、今週は暑いですねー早く秋になってほしい!_(:3」∠)_<ナツオワレーヤキイモタベタイ

さて本題です。今回は、PC版のWebサイトでもtype="text"だけではなく、type="tel"type="email"を使っていきましょうというお話になります。

使うメリットは?

目的はほんの少しだけUXを向上させるためです。
例えば商品を購入するフォームの購入者情報を入力する時に…

  1. 名前を入力
  2. 住所を入力
  3. メールアドレスを入力 って全角で入力されてるじゃん!

のようなイラッとした体験はありませんか?
Windowsの場合、そのままF10キーで解決しますが、あまりリテラシーの高くないエンドユーザはF10で半角英数字に変換できることを知らないはずです。

これはほとんどの場合、テキストボックスがtype="text"で実装されていることが原因でしょう。
これを解決するために、半角英数字で入力したいテキストボックスをtype="tel"type="email"でマークアップします。

type="tel"type="email"についてはこちらを参照してください。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input

サンプル

See the Pen inputType by trrn1210 (@trrn1210) on CodePen.

ちなみに、メールアドレスや電話番号にフォーカスした状態で半角/全角キーを押すと、IMEモードは変更されてしまいます。

執筆時点のブラウザの実装状況

ブラウザはメジャーバージョンのみ記載しています。
残念なことにMacは全滅でした…OSレベルでブラウザからIMEを変更することはできないのかもしれません。

Windows 7 SP1macOS Sierra
Internet Explorer 11Mozilla Firefox 55Google Chrome 60Safari 10Mozilla Firefox 55Google Chrome 60
×××

まとめ

現時点ではWindowsのみのようですが、type="tel"type="email"にするだけで入力に適したIMEモードになるのでおすすめです!

確実に全角文字を入力させたいのであれば、2015年の記事ですが、こういうこともできるようです。
http://qiita.com/ttake/items/072508219af6e32a263a

執筆者も書かれているように、一瞬チラチラみえてかっこわるいですね。。。


Previous: jQueryの基本 Part4 Next: head内の記述

© 2017 ALL CONNECT Inc. All Rights Reserved.