无法在 Safari 中设置焦点
Can't Set Focus in Safari
我试图在打开页面或按下按钮时将焦点设置到特定的编辑字段。以下简单的 HTML/Javascript (Test.html) 适用于 Firefox 和 Chrome 但不适用于 Safari。 Safari 将使用清除按钮清除文本,并使用查找按钮 post 清除文本,但按下 select 按钮时不会 select 清除文本。任何帮助,将不胜感激。 (iOS 7 在 iPad 2 上)
更新 -- 替换为工作代码
<html>
<head>
<!-- Latest JQuery; Must be loaded before Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<script>
$(document).ready(function()
{
var identNum = document.getElementById("identNum");
identNum.value = "AAAABBBB111"
identNum.focus();
identNum.setSelectionRange(0, identNum.value.length);
});
</script>
<body>
<div>
<form class="form-horizontal" name="myForm" role="form" action="Test" method="post">
<div class="form-group" align="center">
<div>
<label class="control-label">Text:</label>
<input type="text" id="identNum" name="identNum" size="25" value="" style="text-align:center;'">
</div>
<div>
<button class="btn btn-primary">Find</button>
<a class="btn" onclick="javascript:document.getElementById('identNum').value=''" >Clear</a>
<a class="btn" onclick="javascript:document.getElementById('identNum').focus(); document.getElementById('identNum').setSelectionRange(0, identNum.value.length)" >Select</a>
</div>
</div>
</form>
</div>
</body>
</html>
编辑为包含 .focus()
尝试
javascript:document.getElementById('identNum').focus().setSelectionRange(0, 999);
移动设备,尤其是 iOS select();
可能会很有趣
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
编辑:关于无需用户交互的输入焦点的说明
由@zappullae 发现
似乎在 iOS 的最新版本中,Apple 需要用户交互才能激活键盘,因此这在页面加载时是不可能的。
https://medium.com/@brunn/autofocus-in-ios-safari-458215514a5f
我试图在打开页面或按下按钮时将焦点设置到特定的编辑字段。以下简单的 HTML/Javascript (Test.html) 适用于 Firefox 和 Chrome 但不适用于 Safari。 Safari 将使用清除按钮清除文本,并使用查找按钮 post 清除文本,但按下 select 按钮时不会 select 清除文本。任何帮助,将不胜感激。 (iOS 7 在 iPad 2 上)
更新 -- 替换为工作代码
<html>
<head>
<!-- Latest JQuery; Must be loaded before Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<script>
$(document).ready(function()
{
var identNum = document.getElementById("identNum");
identNum.value = "AAAABBBB111"
identNum.focus();
identNum.setSelectionRange(0, identNum.value.length);
});
</script>
<body>
<div>
<form class="form-horizontal" name="myForm" role="form" action="Test" method="post">
<div class="form-group" align="center">
<div>
<label class="control-label">Text:</label>
<input type="text" id="identNum" name="identNum" size="25" value="" style="text-align:center;'">
</div>
<div>
<button class="btn btn-primary">Find</button>
<a class="btn" onclick="javascript:document.getElementById('identNum').value=''" >Clear</a>
<a class="btn" onclick="javascript:document.getElementById('identNum').focus(); document.getElementById('identNum').setSelectionRange(0, identNum.value.length)" >Select</a>
</div>
</div>
</form>
</div>
</body>
</html>
编辑为包含 .focus()
尝试
javascript:document.getElementById('identNum').focus().setSelectionRange(0, 999);
移动设备,尤其是 iOS select();
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
编辑:关于无需用户交互的输入焦点的说明
由@zappullae 发现
似乎在 iOS 的最新版本中,Apple 需要用户交互才能激活键盘,因此这在页面加载时是不可能的。
https://medium.com/@brunn/autofocus-in-ios-safari-458215514a5f