Input Focus 踩坑紀錄

前言

紀錄一下 在手機上 使用input的狀況下 遇到的問題

Ios input focus 頁面會放大

ios在手機瀏覽時，點擊input時，螢幕會自動放大，造成頁面可以左右滑動的問題。

textarea框好像也會有這方面的問題

在網路上找到很多原因，但好像也沒有比較有關連性的
比較有建設性的說法

蘋果覺得點擊輸入框放大是一個“很好”的體驗，就擅自把頁面給放大了

解決方法

試了很多種，以下方法符合我的使用狀況 ↓

發現在 font-size < 16px 時， safari 會幫你放大

所以只要將 點擊input後顯示的畫面內容 的font-size 更改為16px 即可。

//input
font-size:16px;

---

input 點擊時 ，跳出一層Div 來輸入時， 還是可以滑動底層的scroll

情境說明

在表單選項中，有一個input 點擊時，會跳出一時，會跳出一Div裡面有地址選項給user點擊，
但發現跳出來時，可以滑動前面畫面的Scroll Y軸 影響使用體驗!!

解決方式

在CSS 設定一個position選項

.hidden {
    position: fixed;
}

然後在JS 中 新增下列兩個function

var topNum;
function onShow(){
    topNum = $("body").scrollTop()
    $("body").addClass("hidden");
}
function onHide(){
    $("body").removeClass("hidden")
    $("body").scrollTop(topNum)
}

然後新增一個監聽事件

$('.inputBTN').on('click', function (e) {
        //loading 點點開啟
        $(".loading-flex").show();
        setTimeout(() => {
            $("#writeBTN").trigger('focus');
            onShow();                            //<----------------------開啟   加在這裡
            //把 loading的點點點關掉
            $(".loading-flex").hide();
        }, 1000)
    })


$(".close-btn").on('click', function () {

        setTimeout(() => {
            onHide();                            //<----------------------關閉    加在這裡
        }, 1)

    })

以上是最近input 點擊事件有遇到的紀錄

如有錯誤再麻煩跟我分享

---

References

• input聚焦時頁面放大的解決
• 在行動裝置上避免點擊輸入框時畫面放大
• iOS input/textarea focus時頁面放大