IOS показывает клавиатуру при фокусе ввода
У меня проблема, которую я не могу исправить.
Клавиатура не отображается на ввод.фокус() на IOS
searchMobileToggle.addEventListener('click', function() {
setTimeout(function(){
searchField.focus();
}, 300);
});
Я искал решение безрезультатно, я знаю, что это часто нерешенный вопрос, но я вижу, что Найк (https://m.nike.com/fr/fr_fr/) и ПРОДОВОЛЬСТВЕННЫЙ ИСТОЧНИК (https://www.foodspring.fr/) делают это на мобильных устройствах.
Вот мне и интересно, как они?
Фокус — это когда вы щелкаете по элементу. Вы хотите вместо этого использовать функцию onclick?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Не существует способа законный сделать это, поскольку iOS хочет открывать клавиатуру только при взаимодействии с пользователем, однако вы все равно можете добиться этого либо с помощью prompt(), либо с помощью focus() из события click(), и оно появится.
«Изнутри события click()», то есть вы в основном говорите удалить тайм-аут, верно? Поскольку автор уже находится в событии клика
Нет, ты можешь оставить это себе. В основном запускайте событие щелчка в поле ввода после его фокусировки.
Я нашел решение, click() не работал, но я разобрался.
searchMobileToggle.addEventListener('click', function() {
if (mobileSearchblock.classList.contains('active')) {
searchField.setAttribute('autofocus', 'autofocus');
searchField.focus();
}
else {
searchField.removeAttribute('autofocus');
}
});
Я работал с vue.js, который удалял входной атрибут autofocus при загрузке компонента.
Так что у меня это было по клику, но была другая проблема, автофокус сработал только один раз, но в сочетании с focus() он теперь работает постоянно :)
Спасибо за вашу помощь !
У меня не работает ... я даже совместил это с запуском события щелчка после установки фокуса, все равно не работает: / Тестирование на Iphone11 iOS, v13 Safari
Ни один из других ответов не работал для меня. В конце концов я изучил код javascript Nike, и вот что я придумал в качестве многократно используемой функции:
function focusAndOpenKeyboard(el, timeout) {
if (!timeout) {
timeout = 100;
}
if (el) {
// Align temp input element approximately where the input element is
// so the cursor doesn't jump around
var __tempEl__ = document.createElement('input');
__tempEl__.style.position = 'absolute';
__tempEl__.style.top = (el.offsetTop + 7) + 'px';
__tempEl__.style.left = el.offsetLeft + 'px';
__tempEl__.style.height = 0;
__tempEl__.style.opacity = 0;
// Put this temp element as a child of the page <body> and focus on it
document.body.appendChild(__tempEl__);
__tempEl__.focus();
// The keyboard is open. Now do a delayed focus on the target element
setTimeout(function() {
el.focus();
el.click();
// Remove the temp element
document.body.removeChild(__tempEl__);
}, timeout);
}
}
// Usage example
var myElement = document.getElementById('my-element');
var modalFadeInDuration = 300;
focusAndOpenKeyboard(myElement, modalFadeInDuration); // or without the second argument
Обратите внимание, что это определенно хакерское решение, но тот факт, что Apple так долго не исправила это, оправдывает его.
@sandrina-p У меня это сработало в этой песочнице кода в ios v13: codeandbox.io/s/z33rnoy1nm
@ n8jadams, можем ли мы сделать это, не нажимая кнопку «Показать модальное окно»?
@Дипак, конечно. Эта песочница кода просто использует обратный вызов onclick, который вызывает эту функцию. Всякий раз, когда вы хотите, чтобы все это произошло (по щелчку или нет), вызовите функцию focusAndOpenKeyboard.
мой вариант использования - с contenteditable div. я думал, что поведение будет таким же, как и у div contenteditable. кажется это не так.
@chitgoks Я никогда не пробовал это с редактируемым контентом div, но вы можете попробовать что-то из этого другого ответа SO: stackoverflow.com/questions/2388164/…
Успешно использовал этот хак на iOS 13.3 с React и MUI. Спасибо, @n8jadams!
@ n8jadams Я пробовал, не работает. Не могли бы вы посмотреть на него (stackoverflow.com/questions/63652448/…) и ответить. Спасибо!
@maverickosama92 Этот хак зависит от нюансов веб-браузера. Он не будет работать в нативной мобильной среде, такой как Ionic framework, React Native и т. д.
Я тоже пробовал в мобильном сафари. Я думаю, что ion-content overflow=true имеет некоторые проблемы, из-за которых не фокусируется ввод и, следовательно, клавиатура не появляется. В любом случае спасибо за этот код. Ваше здоровье!
offsetTop и offsetLeft не обязательно будут на расстоянии от верхней и левой части body. Я считаю, что лучшим подходом было бы добавить __tempEl__ к родительскому контейнеру el, чтобы вы не сравнивали яблоки и апельсины. developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop@tylertrotter Это хорошее решение, если вы знаете, что можете напрямую возиться с окружающими элементами DOM. Я использую это в React и не могу. Приблизительное расположение меня вполне устраивает.
@ n8jadams, если по какой-то причине вы не можете добавить к тому же элементу, вы можете добавить к телу и использовать getBoundingClientRect().top, который измеряется из области просмотра. Расположение, вероятно, точно для вас, однако, если вы добавите CSS position: relative к любому предку между el и body, измерение может быть далеким. Это может не иметь значения для вас, но это имело значение в моем случае, поэтому я хотел сделать это предостережение для других в том же месте, что и я. developer.mozilla.org/en-US/docs/Web/API/Element/…