1、用了H5的aotufocus属性,在PC端主流浏览器上可以成功聚焦
2、在移动端十分诡异,初次加载页面时无法聚焦,刷新一次页面就可以聚焦
(ios Safari浏览器加载后可实现聚焦,用了其他浏览器如:手机端傲游,则需要刷新一次页面才可聚焦)
3、本人发现钉钉内置的浏览器也存在上述问题,需要刷新一次页面才可聚焦
4、本人也尝试过使用$("#input1").focus();来聚焦,发现问题还是存在
测试代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name = "format-detection" content = "telephone=no">
<title>聚焦测试</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
function f_focus () {
$("#input1").focus();
}
</script>
</head>
<body style="margin:1em;">
<form id="form1" autocomplete="off">
<div class="form-group">
<label for="input1">输入框1</label>
<input type="text" class="form-control" id="input1" name="input1" placeholder="输入框1" autofocus>
</div>
<div class="form-group">
<label for="input2">输入框2</label>
<input type="text" class="form-control" id="input2" name="input2" placeholder="输入框2">
</div>
<div class="form-group">
<button id="btn_cfm" type="button" class="btn btn-primary btn-lg btn-block" onclick="f_focus();">聚焦</button>
</div>
</form>
</body>
</html>
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。