iPadとiPhoneのスクリーンキーボード閉じるボタンは全く挙動が異なる

この2つのスクリーンキーボードを閉じるボタンは、全く挙動が違うshokai.icon

iPhone / iPad

https://scrapbox.io/files/63a1811a565dff001e22b45a.pnghttps://scrapbox.io/files/63a1811ec373c9001edce58c.png

「あ」を2回入力してから変換確定せずに閉じるボタンを押した時の挙動

キーボードが隠れつつ

iPad 16.2 Safari

https://scrapbox.io/files/63a181110da26d001d6bf29b.png

おおまかな順序

input → 空input → input →compositionend → blur

謎の空input

一回だけ、空のテキストでinputイベントが発火する

続けて、テキストが復活した状態でinputして、最後にcompositionendが発火する

Mac safariでも発生している

Mac chromeでは発生しない

iPhone 16.2 Safari

https://scrapbox.io/files/63a1810fabe473001db1fef5.png

おおまかな順序

change → blur → focus → 空input → input → compositionend

閉じるボタンを押すとすぐblurするが、その後もう一度focusしている

謎の空inputもある

changeが発火する

これはiPadでは発火しないイベント

iPhoneでは操作を終えると、最終的にfocusの青い枠がついたままになっている

iPadではこの青枠は無い

https://scrapbox.io/files/63a18126953a0b0022b76382.png

しかし中にcaretは入っていない

どちらもcompositionstartやcompositionupdateのタイミングに関しては、変な所は無い

計測方法

code:js

const textInput = document.querySelector('.text-input')

const events = [

'focus',

'blur',

'input',

'change',

'compositionstart',

'compositionupdate',

'compositionend'

]

for (const name of events) {

textInput.addEventListener(name, e => {

console.log(name, e.target.value)

})

}