极客观点
项目管理
HarmonyOS
在线测试地址+完整代码： 点击查看
ios中关于input焦点事件的两个bug
【bug1:错位】手机QQ中打开页面，input框获取焦点后box框位置下移（错位）
【bug2:自动置顶】微信中获取焦点后，页面直接返回到顶部（应该是要记住之前scrollTop位置的）
尝试的解决办法：
如果是在ios中的qq，微信中打开，获取焦点后，阻止事件默认行为，并让input的box框的top值等于0；但是不起作用；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>input焦点事件测试</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<style>
*{
padding: 0;
margin: 0;
}
ul li{
list-style:none;
}
.box{
border-bottom: 1px solid #ddd;
position: fixed;
top: 0;
width: 100%;
background: #6faeed;
padding: 20px;
margin: 0;
}
.box li{
width: 33.33%;
float:left;
}
.box2{
margin-top: 100px;
}
input{
width: 90%;
padding: 7px;
}
</style>
<body>
<div class="box">
<input type="text" name="搜索框" placeholder="搜索关键字">
<ul>
<a href="javascript:"><li>条件一</li></a>
<a href="javascript:"><li>条件二</li></a>
<a href="javascript:"><li>条件三</li></a>
</ul>
</div>
<div class="box2">
<ol>
<li>顶部了</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>底部了</li>
</ol>
</div>
<script type="text/javascript">
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {//移动终端浏览器版本信息
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信
qq: u.match(/\sQQ/i) == " qq" //是否QQ
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
if(browser.versions.mobile || browser.versions.ios || browser.versions.iPhone || browser.versions.iPad && brower.versions.qq){
//焦点事件
$("input").on("focus",function(e){
e.preventDefault();
$(".box").css("top",0);
console.log(100);
})
}
</script>
</body>
</html>
试下把input的outline改为none
border设为1px