logo标签列表

无法在Safari中设置焦点

javascripthtmliossafarisetfocus
3
我正在尝试在页面打开或按钮被按下时将焦点设置为特定的编辑字段。以下简单的HTML/Javascript（Test.html）适用于Firefox和Chrome，但不适用于Safari。Safari可以使用清除按钮清除文本并将其发布到查找按钮，但按下选择按钮时无法选择它。任何帮助都将不胜感激。（iPad 2上的iOS 7）
更新--已替换为可工作的代码
<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>
1个回答
6

编辑后包括 .focus()

尝试

javascript:document.getElementById('identNum').focus().setSelectionRange(0, 999);

移动设备，特别是iOS对于 select(); 可能会有些奇怪。

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLInputElement/setSelectionRange

编辑：关于无用户交互的输入焦点的说明

由 @zappullae 发现

在最近的iOS版本中，似乎需要用户交互才能激活键盘，因此这将无法在页面加载时实现。

https://medium.com/@brunn/autofocus-in-ios-safari-458215514a5f

谢谢Perran。它在Firefox和Chrome的ready()页面上运行正常，但在按下选择按钮时不起作用（曾经有效）。Safari在任何情况下都无法工作，无论是加载还是按下按钮。Firefox和Chrome移动版也可以使用select()。 - glez
1
哎呀，忘了 - 你需要先聚焦输入框 - 所以是 .focus().setSelectionRange(0, 9999)。我刚在Chrome、Firefox、Safari 11、iOS11、iOS 8和iOS7上测试过。 - Perran Mitchell
好的伙计，成功了！感谢你的帮助。我不得不分离出focus()和setSelectRange()的调用，如上所述修复了代码。我注意到只有在Safari浏览器上，来自ready()函数的所选文本没有高亮显示（反向背景），即使它被选中，但当选择按钮被按下时，它会被选中和高亮显示。 - glez
更新 - 选择按钮现在可以正常工作了，但是同样的代码在页面加载时无法选择文本。我尝试将焦点/选择代码放在脚本中作为页面上的最后一项，但仍然没有成功。似乎编辑字段在选择完成之前没有获得焦点。我必须点击编辑框才能将文本扫描到其中。 - glez
1
所以显然这是设计上的问题，因为苹果不希望开发者控制移动Safari中键盘何时显示！我理解的是，在使用focus()之前，用户必须先与页面进行交互。这正是我想避免的。在工业环境中，使用扫描仪的用例是扫描某些东西，查看页面。再次扫描，同样的情况会发生。唉！ - glez
1
很好！我会将这个加入到答案中，以便其他人需要时可以使用。 - Perran Mitchell
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接