问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

iphone的safari在input框focus时, 下面会多出70px问题

头像
会说话的鱼
    2.9k105470

    页面是这样的

    clipboard.png

    当我的键盘定位到输入框时, 加上scrollIntoView()之后, 就成这样了

    clipboard.png

    问题就是为什么safari下input和键盘中间多出来那一块, 这个怎么破, 注: 目测这一块是safari底栏的高度

    代码如下

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,maximum-scale=1,user-scalable=no">
    <title>测试safari的高度</title>
    <style>
        body {
            background-color: red;
        }
        input {
            position: absolute;
            bottom: -50px;
            left: 0;
            width:100%;
            height:50px;
        }
        #myDiv {
            position: absolute;
            bottom: 100px;;
        }
    </style>
</head>
<body>
    <input id="myInput" onclick="test()">
    <div id="myDiv">

    </div>
<script>
    function test() {
        var myInput = document.querySelector("#myInput");
        setTimeout(function () {
            myInput.scrollIntoView(true);
        }, 1000)

    }
</script>
</body>
</html>
    iphonesafarijavascript
    阅读 4.8k
    1 个回答
    得票最新
    头像
    皮小蛋
      8k11
      ✓ 已被采纳

      在ios里面，当一个文本框的样式为fixed时候，如果这个文本框获得焦点，它的位置就会乱掉，由于ios里面做了自适应居中，这个fixed的文本框会跑到页面中间。 这也是你说的 “ 多出70px ”的原因。

      解决办法有两个：
      可以在文本框获得焦点的时候将fixed改为absolute，失去焦点时在改回fixed，但是这样会让屏幕有上下滑动的体验不太好。

      .fixfixed {
   position:absolute;
}

$(document)
    .on('focus', 'input', function(e) {
        $this.addClass('fixfixed');
    })
    .on('blur', 'input', function(e) {
        $this.removeClass('fixfixed');
    });

      还有一种就是用一个假的fixed的文本框放在页面顶部，一个absolute的文本框隐藏在页面顶部，当fixed的文本框获得焦点时候将其隐藏，然后显示absolute的文本框，当失去焦点时，在把absolute的文本框隐藏，fixed的文本框显示。

      .fixfixed {
position:absolute;
}
$(document)
    .on('focus', 'input', function(e) {
        $absolute..show();
        $this.hide();
    })
    .on('blur', 'input', function(e) {
         $fixed..show();
        $this.hide();
    });

      题主可以试一下。;)

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