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

问题1:项目时,做了个搜索框,想实现的功能是输入信息的部分文字就能跳到该信息的位置,设置input框始终置顶,position:fixed,在苹果手机的浏览器上,只要一输入文字就会跳到该位置没错,但是input框因为输入法的出现没看到,会出现图二这种情况。
clipboard.png
(图一:输入法关闭之后才会显示出该input搜索框)
clipboard.png
(图二:注意光标的位置。原本应该是在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);
        }

    });
回复
阅读 4.2k
1 个回答

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏