Как программно сфокусироваться на текстовом поле при загрузке страницы для мобильного сафари?
Примечание. Из-за изменений, связанных с работой, я больше не могу проверить ответы, размещенные здесь. Скорее всего, я никогда не смогу принять ответ внизу. Информация, размещенная здесь, полезна для ИМО, поэтому я просто оставлю ее как есть. Если вы думаете, что знаете ответ, не стесняйтесь отвечать, и мы просто позволим сообществу решить, какие из них полезны.
Фон
Я занимаюсь разработкой автономного веб-приложения для 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 после считываемого штрих-кода, тем самым отправляя форму, на которой включено текстовое поле. После перезагрузки страницы, если текстовое поле автоматически фокусируется, все, что нужно сделать пользователю, это прочитать другой штрих-код. Страница отправляется снова, перезагрузки, автофокусировки и цикл может быть повторен.
Ответы
Ответ 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.
Oh и CanIUse на всякий случай!
Теперь, когда это происходит, когда мы нажимаем кнопку, это оценивается как "Пользовательский ввод", потому что клавиатура может быть выведена только в том случае, если пользователь вводит вход (в android и ios), мы запускаем функцию popKeyboard, которая фокусирует вход и устанавливает для параметра selectionRange значение 0,0, что означает, что он устанавливает каретку в 0, и клавиатура должна появиться.
Это было протестировано в Android и Iphone 7 с IOS 11.
Будьте осторожны, что она предупредила меня, что ее ios 11 не был полностью обновлен, но если он работает, пожалуйста, скажите мне!
Ответ 2
Попробуйте это?
$(function(){
$('input.form-control.first-responder').first().focus();
});
Селектор сужается первым() и гарантирует, что он не будет затронут другими аналогичными классами на странице.
Ответ 3
Посмотрите на этот вопрос с решением:
jQuery Установить положение курсора в текстовой области
Если вы используете функции, описанные в этом решении сразу после ajax ready event, клавиатура будет отображаться даже в Safari на iOS 11.2.2
Ответ 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/
Ответ 5
Используйте ajaxComplete вместо load или ready событие.
Я просто загружаю 1 файл через ajax и ajaxComplete метод. Я установил фокус для поля ввода.
Это рабочий пример, я надеюсь, что это сработает для вас.
<!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>
Ответ 6
Просто экспериментировал. В iOS 11,.focus() не будет отображать клавиатуру, если вы попытаетесь установить ее на самом первом элементе управления, если пользователь не коснется элемента управления в первый раз. Однако .focus() отобразит клавиатуру, если вы не сделали .blur() в текущем документе. ActiveElement перед тем, как вы .focus() на другом элементе.
Ниже код работал у меня с этого нажатия (считыватель штрих-кодов, ScanBoard) для 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();
}
});
Ответ 7
сначала воспользуйтесь становлением сталФиронResponder() в веб-просмотре
