修復安卓鍵盤彈起擋住輸入框bug

陸霸天發表於2018-07-25

看到了同事寫的程式碼。感覺有點意思。先貼上過來。(又賺到了)

    // 修復安卓端鍵盤彈起擋住輸入框bug
        androidInputFocusToView () {
            var isAndroid = /Android|Linux|Adr/i.test(navigator.userAgent)
            if (isAndroid) {
                // 在 input 被點選或者獲取焦點的時候,迴圈監聽 window 高度
                $(document).on('click, focus', 'input', ($event) => {
                    var target = $event.target,
                        height = window.innerHeight,
                        t = new Date().getTime();

                    var interval = setInterval(() => {
                        // window 高度變小,滾動 input 到 view 區域
                        if (window.innerHeight < height) {
                            target.scrollIntoViewIfNeeded();
                            clearInterval(interval);
                        }
                        // 若上一步未觸發,1s 後 自動銷燬監聽
                        if (new Date().getTime() - t > 1000)
                            clearInterval(interval)
                    }, 100)
                })
            }
        }
複製程式碼

相關文章