Javascriptでスマホのスクリーンキーボードの高さとかを検出する話 | かぁくん本紀
公開日時: 2023-01-02 01:16:54更新日時: 2023-03-22 02:29:30事の発端 「アプリが不便になった」知り合いから突然そんな一報があったのは大晦日の夜。 当該のwebアプリはたしかに当方が自作したものでしたが、2ヶ月以上更新していなかったはずがいきなり不具合の報告とあって、まさに寝耳に水でした。 調べてみると、どうやらChromeがバージョン108にアップデートされた辺りでAndroid版でのスクリーンキーボード周りの仕様に以下のような変更があった模様。 これまでのChrome ちなみに、Safariなどは以前から後者の仕様だったようですが、当方のwebアプリはAndroid向けだったためこのような仕様は考慮しておらず…… 結果的に、正月早々からこの仕様変更への対処に追われることになってしまいました(まあ、これでiOS環境でも利便性が向上するというメリットは
【Android】Webページでソフトウェアキーボードを呼び出すとviewportの高さが狭まる - UGA Boxxx
スマートフォンで入力フォームにフォーカスをあてるとソフトウェアキーボードが出現するが、position: fixedで画面の下部に固定した領域（フローティング領域）がiOSとAndroidで挙動が異なっていた 特に困ったのはAndroidの方で、キーボードが呼び出されるとviewportのサイズが変更されるみたいで、フローティング領域がキーボードの上に固定されてしまう これによってユーザーが見える部分がかなり狭くなってしまう これを解決したい キーボードが呼び出されたことの検知 いろいろ調べたが、キーボードが呼び出されたことを検知するにはresizeを使うのがよさそう window.visualViewport.addEventListener('resize', resizeHandler); これで、キーボードが呼び出されたときにresizeHandler関数が実行される キーボードの
iOS の position:fixed バグ回避方法【日記 2014/01/26】
前: ボタンの左右位置次: 雪・科学館・おゆうぎ会 iOS の position:fixed バグ回避方法 2014-01-26 17:32:32 コンピュータ お手伝いしている仕事で、バッドノウハウばかりが溜まっていく気がする… デザイン上の都合で、CSS で position:fixed が使われていた。 テキスト入力を促す箇所で、画面の真ん中に入力窓が出てくる。 まぁ、ネットではよく見るインターフェイスです。 ところが、これは iOS では「使ってはならない」技だった。 バグ報告があり、たまたまバグが出た個所が僕の担当箇所だったので僕が調べることに。 でも、プログラムのバグではなく、iOS のバグだと判明。 position:fixed では、ページをスクロールさせても、ウィンドウに対して常に同じ位置に要素を表示できる。 常に同じ、というとスクロールさせるのをサボるだけで難しくな
iOS Safari でキーボード表示時にフッターを固定するもう1つの方法 - *iroi*
zenn.dev エディタを作っていると iOS Safari でキーボードを開いたときの挙動は本当に大変ですよね。 この記事では、キーボードを開いたままスクロールしてもフッターを固定できるようなワークアラウンドを最近見つけたので紹介します。 Safari 16 以降が必要。キーボード開閉時に追従が遅れる挙動は改善しません。 デモは https://mechairoi.github.io/ios-safari-virtual-keyboard/。iPhone か iOS Simulator でお試しください。 GitHub - mechairoi/ios-safari-virtual-keyboard Virtual Keyboard の挙動 Virtual Keyboard を開いたときには以下のようなことが起こっていると推測しています。 Visual_Viewport_API で取得で
KeyboardEvent: code プロパティ - Web API | MDN
UI EventsKeyboardEventコンストラクターKeyboardEvent()インスタンスプロパティaltKeycharCode 非推奨 code ctrlKeyisComposingkeykeyCode 非推奨 keyIdentifier Non-standard 非推奨 locationmetaKeyrepeatshiftKeyインスタンスメソッドgetModifierState()initKeyboardEvent() 非推奨 initKeyEvent() Non-standard 非推奨 継承UIEventEventUI Events に関連するページCompositionEventFocusEventInputEventMouseEventMouseScrollEventMutationEventUIEventWheelEvent KeyboardEvent.code
キーコード一覧 【JavaScript 動的サンプル】
キーコードは、イベントのwhichプロパティで取得できます。 取得できるイベントはkeydown、keyup、keypressです。ただし、イベントによって、発生タイミングや発生有無に違いががあります。 また、ブラウザによってコードが異なるキーもあるので、注意が必要です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
