JavaScriptのfocusメソッドを使ったときにiPhoneのSafari上でソフトウェアキーボードが出てこないようにしたい
先日のポストにも書いた下記のサイト。
(Slackのリマインダーの日時指定や時間指定方法をいつも忘れるので、用途ごとにすぐにコピペして利用できるサイトです)
こちらのサイトではコピーボタンが実装されており、コピーを押すことでクリップボードにスラックのリマインダーコマンドをコピーできるようにしています。
さて、このコピーボタンですが、実はリリース直後に一つ問題が発生していました。
というのも、iPhoneのSafari上ではこのボタンを押した際にソフトウェアキーボードが表示されるようになってしまっていたのです。
問題の原因としては、クリップボードにコピーを行う処理をJavaScriptで記述していたのですが、その処理の中で利用されている input要素に対する focusメソッドを使用した際にソフトウェアキーボードが表示されてしまっているようでした。
ソフトウェアキーボードをSafariで出さないようにするためにはreadonly属性を付与すること
ソフトウェアキーボードを表示させないようにするための対応策は、思いの外シンプルでした。
使用している input タグに対して readonly 属性を付与することで、ソフトウェアキーボードは出ないようになります。
今後も同じ問題にぶつかる可能性がある気がしたので、こちらに備忘録として書いておくことにしました。
