怎么解决苹果手机网页input输入框输入时，input框设置位置固定但是还是显示有问题

Question

问题1：项目时，做了个搜索框，想实现的功能是输入信息的部分文字就能跳到该信息的位置，设置input框始终置顶，position：fixed，在苹果手机的浏览器上，只要一输入文字就会跳到该位置没错，但是input框因为输入法的出现没看到，会出现图二这种情况。

（图一：输入法关闭之后才会显示出该input搜索框）

（图二：注意光标的位置。原本应该是在input框进行输入的，但是输入法一弹出变成只能在光标的位置输入，关闭输入法才能回到图一的位置）

问题2：为了实现输入信息的部分文字就能跳到该信息的位置所以我的input代码是这样的（但是这样也就造成每输入一个字母就会页面滑动位置，导致很混乱，不知道有没有具体的方法可以解决这个问题）：

/* 搜索 */
    $("#searchBox").bind("input propertychange", function () {
        var inputContent = $(this).val();
        var firstInputContent = $(inputContent).toPinyin().toUpperCase().slice(0, 1);
        if (inputContent != "") {
            if (letterArray.indexOf(firstInputContent) != -1) {
                /* $(window).scrollTop($('#' + firstInputContent + '1').offset().top - 150); */
                if ($("div[id^='" + inputContent + "']").length == 0) {
                    $(window).scrollTop($('#' + firstInputContent + '1').offset().top - 150);
                } else {
                    $(window).scrollTop($("div[id^='" + inputContent + "']").offset().top - 150);
                }
            }
        } else {
            $(window).scrollTop($('#B1').offset().top - 150);
        }

    });

Answer 1

这个问题我也遇到了，fixed定位导致的。
我现在的做法是，input未选中时fixed，选中时'absolute'，页面背景'overflow:hidden'，这样输入框还是浮在顶上，失焦之后再换回来，要做的交互上好看的话，'overflow:hidden'的时候，用translate把页面位移到scrollTop()的位置