J'ai un problème que je ne peux pas résoudre.
Le clavier ne s'affiche pas sur input.focus() sur IOS
searchMobileToggle.addEventListener('click', function() {
setTimeout(function(){
searchField.focus();
}, 300);
});
J'ai cherché pour une solution sans résultat, je sais que c'est une question fréquemment non résolue mais je vois NIKE ( https://m.nike.com/fr/fr_fr/ ) et FOODSPRING ( https://www.foodspring.fr/ ) en le faisant sur mobile.
Alors je me demande comment font-ils?
3 Réponses :
Il n'y a pas de moyen légitime de le faire car iOS veut ouvrir le clavier uniquement lors d'une interaction de l'utilisateur, mais vous pouvez toujours y parvenir en utilisant prompt () ou en utilisant focus () à partir d'un événement click () et il apparaîtra.
"Depuis un événement click ()", vous dites essentiellement de supprimer le délai d'expiration, n'est-ce pas? Parce que l'auteur est déjà dans l'événement de clic
Non, vous pouvez garder ça. En gros, déclenchez un événement de clic dans le champ de saisie après l'avoir focalisé.
J'ai trouvé une solution, click () n'a pas fonctionné, mais j'ai compris.
searchMobileToggle.addEventListener('click', function() {
if(mobileSearchblock.classList.contains('active')) {
searchField.setAttribute('autofocus', 'autofocus');
searchField.focus();
}
else {
searchField.removeAttribute('autofocus');
}
});
Je travaillais avec vue.js qui supprimait saisissez l'attribut autofocus , lorsque le composant a été chargé.
Donc je l'ai eu sur clic, mais il y avait un autre problème, l'autofocus ne fonctionnait qu'une seule fois, mais combiné avec focus (), ça marche maintenant tout le temps :)
Merci pour votre aide!
Cela ne fonctionne pas pour moi ... Je l'ai même combiné avec le déclenchement d'un événement de clic après avoir défini le focus, ne fonctionne toujours pas: / Test sur Iphone11 iOS, v13 Safari
Aucune des autres réponses n'a fonctionné pour moi. J'ai fini par chercher dans le code javascript de Nike et c'est ce que j'ai proposé comme fonction réutilisable:
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
Notez que c'est définitivement une solution hacky, mais le fait qu'Apple ne l'a pas fait corrigé cela depuis si longtemps le justifie.
@ sandrina-p Cela a fonctionné pour moi sur ce sandbox de code dans ios v13: codesandbox.io/s/z33rnoy1nm
@ n8jadams pouvons-nous faire cela sans cliquer sur le bouton show modal?
@Deepak bien sûr. Ce bac à sable de code utilise simplement un rappel onclick qui appelle cette fonction. Chaque fois que vous voulez que tout se produise, (en cliquant ou non) appelez la fonction focusAndOpenKeyboard .
mon cas d'utilisation est avec un div contenteditable. Je pensais que le comportement serait le même que celui d'un div contenteditable. semble que ce ne soit pas le cas.
@chitgoks Je ne l'ai jamais essayé avec un div contenteditable, mais vous voudrez peut-être essayer quelque chose de cette autre réponse SO: stackoverflow.com/questions/2388164/...
Utilisé avec succès ce hack sur iOS 13.3 avec React et MUI. Merci, @ n8jadams!
@ n8jadams J'ai essayé cela, cela ne fonctionne pas. Pouvez-vous le consulter ( stackoverflow.com/questions/ 63652448 /… ) et répondez. Merci!
@ maverickosama92 Ce hack dépend des nuances du navigateur Web. Cela ne fonctionnera pas dans un environnement mobile natif comme le framework Ionic, React Native, etc.
J'ai aussi essayé le safari mobile. Je pense que le dépassement de contenu ionique = true a des problèmes qui empêchent de se concentrer sur l'entrée et que le clavier ne s'affiche pas. En tout cas merci pour ce code. À votre santé!
cela vous aiderait-il?
Le focus est lorsque vous cliquez sur l'élément. Voulez-vous la fonction onclick à la place?