ios 如何通过编程在移动的safari的页面加载中关注文本字段？

kmb7vmvb 于 2022-12-24 发布在 iOS

关注(0)|答案(7)|浏览(201)

- 注意：**由于工作上的变动，我无法再验证此处发布的答案。很可能，我永远无法接受下面的答案。此处发布的信息对我很有用，因此我将保持原样。如果您认为您知道答案，请随意回答，我们将让社区决定哪些答案有用。
- 背景**

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

- 问题**

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

- 示例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浏览器上查看这个，然后把它添加到主屏幕上，这样它就可以作为一个独立的网络应用程序。

- 尝试**

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

$(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键，从而提交文本域所在的表单。在页面重新加载之后，如果文本域自动聚焦，则用户所需要做的就是读取另一个条形码。页面再次提交、重新加载、自动聚焦，然后可以重复该循环。

ios

来源：https://stackoverflow.com/questions/48224093/how-to-programmatically-focus-on-a-textfield-on-page-load-for-mobile-safari

7条答案

按热度按时间

cs7cruho1#

经过一些艰苦的测试，我发现了一种方法，在我女朋友的iphone7与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。
哦，以防万一！
现在，当我们点击按钮时，它的计算结果为用户输入，因为键盘只有在用户输入时才能弹出（在Android和iOS中），我们运行函数popKeyboard，它关注输入并将selectionRange设置为0，0，这意味着它将插入符号设置为0，键盘应该会弹出。
这是在Android和iPhone 7与IOS 11测试.

注意，她提醒我她的iOS 11没有完全更新，但如果它工作，请告诉我！

赞(0）回复(0）举报 2022-12-24

tpxzln5u2#

你试过这个吗？

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

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

赞(0）回复(0）举报 2022-12-24

mw3dktmi3#

看看这个问题和解决方案：jQuery Set Cursor Position in Text Area
如果您在ajax ready event之后立即使用此解决方案中描述的功能，则即使在iOS 11.2.2上的Safari中，键盘也会显示

赞(0）回复(0）举报 2022-12-24

pgccezyw4#

使用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>

赞(0）回复(0）举报 2022-12-24

g2ieeal75#

如果您需要确保浏览器已完全加载，而不仅仅是onDOMContentReady，请使用标准load事件，因为一旦加载完全完成（即渲染完成），此事件就会触发
由于一些奇怪的是现代的Web工具包浏览器（chrome，iOS11）的延迟已被添加到某种原因的load事件是触发之前，浏览器实际上是完全加载。但是，我确保仍然使用load事件作为一个起点。

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

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

赞(0）回复(0）举报 2022-12-24

798qvoo86#

刚刚做了一些实验。在iOS 11中，如果用户没有第一次触摸某个控件，就尝试在第一个控件上设置.focus（），那么.focus（）将不会显示键盘。但是，如果用户没有在当前文档上.blur（），那么.focus（）将显示键盘。
下面的代码为我工作，从这个按键（条形码阅读器，扫描板）的iPod：-

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

赞(0）回复(0）举报 2022-12-24

iklwldmw7#

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

赞(0）回复(0）举报 2022-12-24