Question

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

背景

我正在为iPod Touch开发standalone web app。我的一个要求是在页面加载时关注文本字段，以便用户可以连续地执行任务（例如，使用条形码阅读器）。

问题

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

示例Html

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

<!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上查看此内容，然后将其添加到主屏幕，以便它可以充当独立的Web应用程序。

尝试

我试图寻找解决方案，第一个（我丢失链接）建议尝试超时，如下：

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

    }, 1000);

})

我发现的另一个solutions建议设置选择范围如下：

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

    }, 1000);

})

There也建议将其绑定到如下所示的点击：

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

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

我也试过触发像这样的触控：

$(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();         
        }
    });
}

我有点绝望，所以我也试过setting some css：

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

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

此行为似乎是bug或usability / security feature。如果这是设计（即安全功能），是否有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"));
});

这是fiddle。

哦和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 Set Cursor Position in Text Area

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

Answer 4

如果您需要确保浏览器已完全加载，而不仅仅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

首先在网络视图上使用beginFirstResponder（）

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

7 个答案: