ios 键盘遮挡输入框问题

视频

https://www.bilibili.com/video/BV1954y187mk/

页面

image.png
image.png

现象

1、当底部输入框没有内容时,第一次输入框获取焦点可以正常弹出键盘,点击其他地方,键盘收起,再次点击输入框键盘就开始遮挡了。

2、当输入框里有内容时,键盘无论如何都不会遮挡输入框

3、现象1出现以后,如果点击键盘上的 Done,收回键盘,再次点击输入框,也不会遮挡键盘

代码如下

<html lang="zh">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="renderer" content="webkit">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
 <title>ceshi</title>
 <style>
 html,body {
 height: 100%;
 width: 100%;
 padding: 0;
 margin:0;
 position: relative;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 } main {
 bottom: 50px;
 } #footer {
 height: 50px;
 position:absolute;
 bottom: 0;
 width:100%;
 } </style>
</head>
<body>
<div id="main">
 <main></main>
 <div id="footer" >
 <div class="textbox">
 <textarea placeholder="测试测试"></textarea>
 </div>
 </div>
</div>
<script>
 document.firstElementChild.tabIndex = 1;
</script>
</body>
</html>
阅读 4.9k
1 个回答
新手上路,请多包涵

只要定位了,就会出现这个bug,遮挡了需要手动划一下才会出现,采用position:fixed,也会有这个问题的。你可以试试下面方法,点击输入框方法就加上这个
setTimeout(function(){

document.body.scrollTop = document.body.scrollHeight;

},300);

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