如何以编程方式关注移动 safari 页面加载时的文本字段？

Question

注意：由于工作相关的变化，我无法再验证这里发布的答案。 很可能，我永远无法接受下面的答案。 此处发布的信息对 IMO 很有用，因此我将保持原样。 如果您认为自己知道答案，请随时回答，我们只会让社区决定哪些有用。

---

背景

我正在为 iPod Touch 开发一个独立的网络应用程序。 我的要求之一是在页面加载时专注于文本字段，以便用户可以连续执行任务（例如使用条形码阅读器）。

问题

问题是它确实关注有问题的文本字段，但键盘没有上升。 有解决方法吗？ 或者这是苹果设计的？

示例网页

我不确定如何将其放入代码片段中，但这是我一直在试验的地方：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0.0">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="apple-touch-icon" href="https://cdn57.androidauthority.net/wp-content/uploads/2016/06/android-win-2-300x162.png">

    <title>TESTING</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script>
        // javascript goes here
    </script>
</head>
<body>

    <section id="content">

        <div class="container" style="margin-top: 50px;" >

            <p>Testing textfield focus</p>

            <form method="POST">
                <div class="row">
                    <div class="col-xs-12">
                        <input type="text" class="form-control first-responder" />
                    </div>
                    <div class="col-xs-12">
                        <button type="submit" class="btn" style="width: 100%" >OK</button>
                    </div>
                </div>
            </form>

        </div>

    </section>

</body>
</html>

我在 Safari 上查看它，然后将它添加到主屏幕，这样它就可以作为一个独立的网络应用程序。

尝试

我尝试四处寻找解决方案，第一个（我丢失了链接）建议尝试这样的超时：

$(function () {
    var firstResponder = $(".first-responder");
    setTimeout(function() {
        firstResponder.focus();

    }, 1000);

})

我发现的另一个解决方案建议像这样设置选择范围：

$(function () {
    var firstResponder = $(".first-responder");
    setTimeout(function() {
        firstResponder[0].setSelectionRange(0, 9999);

    }, 1000);

})

还有一个建议将它绑定到这样的点击：

$(function () {
    var firstResponder = $(".first-responder");
    firstResponder.on('click', function() {
        firstResponder.focus();
    });

    firstResponder.focus().click();
})

我也试过像这样触发一个 touchstart：

$(function () {
    var firstResponder = $(".first-responder");
    firstResponder.on('touchstart', function() {
        firstResponder.focus();
    });

    firstResponder.trigger('touchstart');
})

我也尝试过这样一个简单的 ajax 调用（不要介意成功/错误。我想做的就是在 ajax 调用之后集中注意力）：

function doAjax() {
    var firstResponder = $(".first-responder");

    $.ajax({
        url: "#",
        method: "POST",
        dataType: "json",
        success: function(result) {
            firstResponder.focus();
        },
        error: function(request, error) {
            firstResponder.focus();         
        }
    });
}

我有点绝望，所以我也尝试设置一些 CSS ：

user-select: text;
-webkit-user-select: text;

这些解决方案适用于 iOS 9.1 （css 除外），但在 iOS 11.1.1 上都失败了。 我尝试组合各种解决方案、设置超时等，但似乎都没有用。 正如我所指出的，它确实具有焦点，因为我可以看到文本字段的边框变为蓝色，表示它具有焦点。 但我也需要显示键盘。

此行为似乎是错误或可用性/安全功能。 如果这是设计使然（即安全功能）， Apple 是否有官方文档对此进行讨论？

附录

如果您认为条形码阅读器可能是问题所在，那是错误的。 在我正在进行的项目中，条形码阅读器取代了本机键盘。 理论上，即使没有条形码，只要我能够在页面加载时调出键盘，我就应该能够满足我的要求。

连续任务是可能的，因为条形码阅读器可以在它读取的条形码后包含一个Enter键，从而提交文本字段所在的表单。 页面重新加载后，如果文本字段自动获得焦点，用户需要做的就是读取另一个条形码。 页面再次提交、重新加载、自动对焦，然后可以重复这个循环。

Answer 1

经过一些艰苦的测试后，我找到了一种方法，可以在我女朋友的iphone 7上使用ios 11，现在我不知道它是否能满足你的需求，但它会弹出虚拟键盘！

这是测试html：

<input type='text' id='foo' onclick="this.focus();">
<button id="button">Click here</button>

这是javascript：

function popKeyboard(input) {
  input.focus();
  input.setSelectionRange(0, 0);
}

$("#button").on("click", function() {
  popKeyboard($("#foo"));
});

而这就是小提琴 。

哦， CanIUse以防万一！

现在这样做是当我们点击按钮时，这评估为用户输入，因为键盘只能在用户输入时弹出（在android和ios中），我们运行popKeyboard函数，它关注输入并设置selectionRange为0,0表示它将插入符号设置为0并且键盘应该弹出。

这是在Android和带有IOS 11的Iphone 7中测试的。

要小心，她确实告诉我她的ios 11没有完全更新，但如果它有效，请告诉我！

Answer 2

你试试这个吗？

 $(function(){
    $('input.form-control.first-responder').first().focus();
  });

选择器通过first（）缩小，并确保它不受页面中其他类似类的影响。

Answer 3

看看这个问题w /解决方案： jQuery在文本区域设置光标位置

如果您在ajax ready event之后立即使用此解决方案中描述的功能，即使在iOS 11.2.2上的Safari中也会显示键盘

Answer 4

如果您需要确保浏览器已完全加载而不仅仅是onDOMContentReady来执行此onDOMContentReady ，请使用标准load事件，因为一旦加载完成就会触发（IE渲染已完成）

由于一些古怪的现代网络工具包浏览器（chrome，iOS11），由于某种原因在浏览器实际完全加载之前触发了load事件，因此添加了延迟。 但是，我确保仍然使用load事件作为起点。

(function($){
  $(function(){
      window.addEventListener("load", function(){
        setTimeout(function(){  $(".first-responder").focus();  }, 150);
      });
  })
})(jQuery);

https://jsfiddle.net/barkermn01/xzua65jd/1/

Answer 5

使用ajaxComplete而不是load或ready事件。

我只是通过ajax和ajaxComplete方法加载1个文件我已经为输入字段设置了焦点。

这是一个有效的例子，我希望这对你有用。

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="apple-touch-icon" href="https://cdn57.androidauthority.net/wp-content/uploads/2016/06/android-win-2-300x162.png"> <title>TESTING</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> span{ display:none; } </style> <script> $(document).ready(function(){ $("span").load("https://www.w3schools.com/xml/cd_catalog.xml"); $(document).ajaxComplete(function(){ $(".first-responder")[0].focus(); }); }); </script> </head> <body> <section id="content"> <div class="container" style="margin-top: 50px;" > <p>Testing textfield focus</p> <form method="POST"> <div class="row"> <div class="col-xs-12"> <input type="text" class="form-control first-responder" /> </div> <div class="col-xs-12"> <button type="submit" class="btn" style="width: 100%" >OK</button> </div> </div> </form> </div> </section> <span></span> </body> </html> 

Answer 6

刚做了一些实验。 在iOS 11中，如果您尝试在第一个控件上设置它而没有用户第一次触摸控件，则.focus（）将不会显示键盘。 但是，.focus（）会显示键盘，在你将.focus（）放在另一个元素上之前，当前document.active元素上没有.blur（）。

以下代码适用于iPod的这个按键（条形码阅读器，ScanBoard）： -

$(window).keypress(function (e) {
    if (e.which === 13) {
        switch (true) {
            case window.location.href.indexOf('FindReplenishmentLocation') > -1:
            case window.location.href.indexOf('ConfirmReplenishmentLocation') > -1:
            case window.location.href.indexOf('ConfirmReplenishmentPickFace') > -1:
                if (document.activeElement.id === 'pickFaceLocationTextBox' || document.activeElement.id === 'bulkLocationTextBox') {
                    if ($('#skuTextBox').val()) {
                        $('#skuTextBox').focus().select();
                    }
                    else {
                        if (isMobile) {
                            $('#skuTextBox').focus().select();
                        }
                        else {
                            $('#skuTextBox').focus();
                        }
                    }
                }
                else {
                    if (window.location.href.indexOf('ConfirmReplenishmentPickFace') > -1) {
                        if ($('#qtyPutAwayNumericTextBox').val()) {
                            $('#qtyPutAwayNumericTextBox').focus().select();
                        }
                        else {
                            if (isMobile) {
                                $('#qtyPutAwayNumericTextBox').focus().select();
                            }
                            else {
                                $('#qtyPutAwayNumericTextBox').focus();
                            }
                        }
                    }
                    else {
                        $('#next-btn').trigger('click');
                    }
                }
                break;                
            default:
                break;
        }

        e.preventDefault();
    }
});

Answer 7

首先在 webview 上使用 becomeFirstResponder()