猫暖房の季節がやってきたYu-ichiです
うちの猫はベッドまでは来てくれるのですが、
布団に入らず足元で丸くなって寝ます。
たまに足の間に入ってることがあるので、寝返りができません。
さて今回は、タイトルで結論を言ってしまっておりますが
モーダルでテキスト入力させるのはやめよう！です。
ページ内をクリックしてモーダルウィンドウを立ち上げ、
そこにあるテキストエリアに文字を入力するシステムを作った際に
PCやAndroidではうまく動作していたのですが、
iPhoneのsafariで操作すると、色々問題がありました。
1つが、勝手に拡大される問題。
これは原因がはっきりしておりまして、入力枠に設定されているフォントサイズが16px未満の場合だとiPhoneではテキストエリアをタップした際に勝手に拡大されてしまいます。
テキストエリア内のフォントサイズを16px以上にすることで簡単に解決できます。
2つ目が、背景スクロール固定問題。
モーダルを開くときに、bodyにoverflow:hidden;をつけてあげれば簡単に解決します。
閉じるときにhiddenを解除すれば戻ります。
ただしiPhone（iOS）以外ですが！
解決方法としてposition:fixed;がありますが、
これだとスクロール情報がリセットされてしまうので、
モーダルを閉じるとページトップに戻ってしまいます。
これはもうどちらか諦めるしかないと思います。
他にも細かい問題（入力枠をタップすると表示されるキーボードの所為で・・・）がありますが、
一番の問題は、これらの現象がほぼ実機でないと再現しないこと。
ツールで試して問題無くても、実機で試すとうまくいかないことが多いです。
さらに、iOSのアップデートで仕様が変わり、新たな問題が発生するなど開発者泣かせです。＜もうやめて・・・
というわけで、モーダルでお問い合わせフォームを作ったり、
スケジュール管理など作るときは気を付けましょう。
UI的にスマートでモーダル好きなんだけどな・・・。
