Safari5 のPattern Attributeの挙動がおかしい(?)
iPad向けのWebアプリケーションを作っている際に、SafariとChromeでHTML5のPattern Attributeで挙動が異なることに気がついた。
もっと言ってしまえば、SafariのPattern Attributeは明らかに挙動がおかしいように思える。
ちょっと調べたがネット上に情報がなさそうなので備忘録としてメモ。
検証したブラウザ
- Safari 5.1 for Windows
- Safari for iOS 4.1
- Google Chrome 13.0.782 for Windows
そもそもPattern Attributeってなに?
Pattern Attribute はHTML5で追加されたinputタグのプロパティだ。
正規表現で入力される値を監視し、正規表現にマッチしない値が入力された場合はsubmit時に自動的にアラートしてくれる。
具体的な挙動はこちらを参照してほしい。
Google Chromeまたは最新のFireFoxでは「ほげほげ」など入力してログインボタンをおすと警告が出る。
どんな風に挙動がおかしいのか?
具体的には上記のサンプルページでアラートがでないのだ。
それだけなら「単純に対応してないだけなんじゃないの?」で済むのだが、
HTML5testで確認する限りSafariはPattern Attributeに対応しているようだ。
(FormsカテゴリのFields - Field Validation - pattern attributeがYesになっている。)
Appleコミュニティも少し調べてみたのだが、この現象を取り扱っているフォーラムを見つけることはできなかった。
僕がpattern attributeについて勘違いしていたり、Safariでは別の書き方をしなくてはならない可能性もある。
同様の問題に遭遇している人や解決策を知っている人がいたら、ぜひシェアしてほしい。