Примечание. Из-за изменений, связанных с работой, я больше не могу проверить ответы, размещенные здесь. Скорее всего, я никогда не смогу принять ответ внизу. Информация, размещенная здесь, полезна для ИМО, поэтому я просто оставлю ее как есть. Если вы думаете, что знаете ответ, не стесняйтесь отвечать, и мы просто позволим сообществу решить, какие из них полезны.
Фон
Я занимаюсь разработкой автономного веб-приложения для iPod Touch. Одно из моих требований - сосредоточиться на текстовом поле при загрузке страницы, чтобы пользователь мог выполнять задачу постоянно (например, с помощью считывателя штрих-кода).
проблема
Проблема в том, что он фокусируется на рассматриваемом текстовом поле, но клавиатура не поднимается. Есть ли обходной путь для этого? Или это от 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="#" onclick="location.href='https://cdn57.androidauthority.net/wp-content/uploads/2016/06/android-win-2-300x162.png'; return false;">
<title>TESTING</title>
<link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;">
<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 после считываемого штрих-кода, тем самым отправляя форму, на которой включено текстовое поле. После перезагрузки страницы, если текстовое поле автоматически фокусируется, все, что нужно сделать пользователю, это прочитать другой штрих-код. Страница отправляется снова, перезагрузки, автофокусировки и цикл может быть повторен.
