视频
https://www.bilibili.com/video/BV1954y187mk/
页面
现象
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>
只要定位了,就会出现这个bug,遮挡了需要手动划一下才会出现,采用position:fixed,也会有这个问题的。你可以试试下面方法,点击输入框方法就加上这个
setTimeout(function(){
},300);