Fatal编程技术网
  • javascript/
  • Javascript 无法在Safari中设置焦点

Javascript 无法在Safari中设置焦点

javascript html ios safari

Javascript 无法在Safari中设置焦点,javascript,html,ios,safari,setfocus,Javascript,Html,Ios,Safari,Setfocus,当打开页面或按下按钮时，我试图将焦点设置为特定的编辑字段。以下简单的HTML/Javascript Test.HTML适用于Firefox和Chrome，但不适用于Safari。Safari将使用“清除”按钮清除文本，并使用“查找”按钮发布文本，但在按下“选择”按钮时不会选择文本。任何帮助都将不胜感激。iPad2上的iOS7 更新-替换为工作代码 <html> <head> <!-- Latest JQuery; Must be loaded before Bo

当打开页面或按下按钮时，我试图将焦点设置为特定的编辑字段。以下简单的HTML/Javascript Test.HTML适用于Firefox和Chrome，但不适用于Safari。Safari将使用“清除”按钮清除文本，并使用“查找”按钮发布文本，但在按下“选择”按钮时不会选择文本。任何帮助都将不胜感激。iPad2上的iOS7

更新-替换为工作代码

<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>
编辑以包括。焦点

试一试

移动设备，尤其是iOS，在选择方面可能会非常有趣

编辑：关于输入焦点的注释，无需用户交互

由@zappullae发现

在最新版本的iOS中，苹果似乎需要用户交互才能激活键盘，因此在页面加载时这是不可能的

编辑以包括。焦点

试一试

移动设备，尤其是iOS，在选择方面可能会非常有趣

编辑：关于输入焦点的注释，无需用户交互

由@zappullae发现

在最新版本的iOS中，苹果似乎需要用户交互才能激活键盘，因此在页面加载时这是不可能的

谢谢你，佩兰。它可以在Firefox和Chrome的页面上运行，但在按下选择按钮时不起作用。Safari在加载或按下按钮两种情况下都不工作。Firefox和Chrome mobile也与select.D'oh配合使用。忘记-您需要先聚焦输入-so.focus.setSelectionRange0，9999。刚刚在chrome、firefox、safari 11、iOS11、iOS8、iOS7Yea buddy中测试过，效果不错！谢谢你的帮助。我必须分开focus和SetElectrange调用，参见上面的固定代码。我在Safari上注意到的一点是，ready功能中选择的文本不会在背景中突出显示，即使它已被选中，但当按下select按钮时，它已被选中并突出显示。因此，显然它在设计上不起作用，因为苹果不希望开发人员控制键盘在mobile中的显示时间游猎！用户必须首先与页面交互，然后焦点才能工作。这是我阅读本文的方式。这正是我想要避免的。在带有扫描仪的工业环境中，用例是扫描某物，请参见页面。再次扫描，同样的情况也会发生。啊！找到了！如果其他人需要，我会把这个添加到答案中。谢谢佩兰。它可以在Firefox和Chrome的页面上运行，但在按下选择按钮时不起作用。Safari在加载或按下按钮两种情况下都不工作。Firefox和Chrome mobile也与select.D'oh配合使用。忘记-您需要先聚焦输入-so.focus.setSelectionRange0，9999。刚刚在chrome、firefox、safari 11、iOS11、iOS8、iOS7Yea buddy中测试过，效果不错！谢谢你的帮助。我必须分开focus和SetElectrange调用，参见上面的固定代码。我在Safari上注意到的一点是，ready功能中选择的文本不会在背景中突出显示，即使它已被选中，但当按下select按钮时，它已被选中并突出显示。因此，显然它在设计上不起作用，因为苹果不希望开发人员控制键盘在mobile中的显示时间游猎！用户必须首先与页面交互，然后焦点才能工作。这是我阅读本文的方式。这正是我想要避免的。在带有扫描仪的工业环境中，用例是扫描某物，请参见页面。再次扫描，同样的情况也会发生。啊！找到了！如果其他人需要，我会在答案中加上这个。 
javascript:document.getElementById('identNum').focus().setSelectionRange(0, 999);