5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

iOS2Advent Calendar 2017

Day 16

iOS Safari特有の挙動でハマったところ

Last updated at Posted at 2017-12-15

ガラケー時代ほどひどくはありませんが、モバイルブラウザは機種特有な挙動を、今でも避けることができません。それはiOSについても当てはまります。

ここでは3つほど挙げておきますが、他にもいろいろあるかと思います。

バブリングしない、click

これはかなり有名な件で、すでにQiitaにも記事がありますが、簡単に言うと、特定の条件を満たさない限り、clickイベントが<body>やそれ以上(windowdocument)までバブリングしない、というものです。イベントが起きる条件としては、

  • <body>の内側(<body>自身は除く)で、押された要素からバブリングしてくる要素にclickイベントを仕掛けてある
  • CSSのcursor: pointerがかかっている
  • <a><button>など、インタラクティブな要素からclickが発生した

という感じです。手抜きな対処法としては、<body>cursor: pointerをかけてしまう、という手段があります(どうせiOSでカーソルは出ませんし)。

電話番号なのに、<input type="tel">が合わない

最近かなり増えた<input>typeですが、電話番号用に<input type="tel">があります。モバイル機で正しくtypeをセットしておけば、状況に応じて適切なキーボードを選んでくれます。

…が、<input type="tel">で選ばれるiOS標準のキーボードは、以下のようなものです。

tenkey_s.png

隅っこに記号ボタンはありますが、ここにある記号も限られていて、とくにハイフンがありません。ハイフンを入力させたい電話番号欄の場合、<input type="tel">が使えないという、妙なことになります(もちろん、大きなキーボードの出るiPadの場合や、標準とは違うキーボードの場合は問題ないかもしれません)。

止まらない、invalid(iOS 10.3で解消)

何かと便利なバリデーション属性ですが、iOS 10.2以下では条件を満たしていなくても送信が続いてしまいます。止めるためには、submitでフォームの状態をチェックして、preventDefaultするぐらいしか、手はありません。

タップで反応しない、<input type="range">

スライダ入力になる<input type="range">ですが、iOSではスライダをドラッグしないと反応しなくて、目的地のタップはスルーしてしまいます。onclickなどでイベントを拾って、自前で値を変更する必要があります。

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?