Safari mobile : La méthode Javascript focus() sur un champ de saisie ne fonctionne qu'en cas de clic ?

Question

J'ai un champ de saisie simple comme celui-ci.

<div class="search">
   <input type="text" value="y u no work"/>
</div>

Et j'essaie de focus() à l'intérieur d'une fonction. Ainsi, à l'intérieur d'une fonction aléatoire (peu importe de quelle fonction il s'agit), j'ai cette ligne

$('.search').find('input').focus();

Cela fonctionne parfaitement sur tous les ordinateurs de bureau, quels qu'ils soient.

Cependant, il ne fonctionne pas sur mon iPhone. Le champ n'est pas mis en évidence et le clavier ne s'affiche pas sur mon iPhone.

À des fins de test et pour vous montrer le problème, j'ai réalisé un échantillon rapide :

$('#some-test-element').click(function() {
  $('.search').find('input').focus(); // works well on my iPhone - Keyboard slides in
});

setTimeout(function() {
  //alert('test'); //works
  $('.search').find('input').focus(); // doesn't work on my iPhone - works on Desktop
}, 5000);

Une idée de la raison pour laquelle le focus() ne fonctionne pas avec la fonction de temporisation de mon iPhone.

Pour voir l'exemple en direct, testez ce bidule sur votre iPhone. http://jsfiddle.net/Hc4sT/

Mise à jour :

J'ai créé exactement le même cas que celui auquel je suis actuellement confronté dans mon projet actuel.

J'ai une boîte de sélection qui devrait, lorsqu'elle est "modifiée", mettre l'accent sur le champ de saisie et faire glisser le clavier sur l'iphone ou d'autres appareils mobiles. J'ai découvert que la fonction focus() est correctement activée mais que le clavier ne s'affiche pas. J'ai besoin que le clavier s'affiche.

Answer 1

J'ai un formulaire de recherche avec une icône qui efface le texte lorsqu'on clique dessus. Cependant, le problème (sur les téléphones mobiles et les tablettes) est que le clavier s'effondre ou se cache, car l'icône de recherche ne s'affiche pas. click événement supprimé focus a été retiré de la input .

Objectif : après avoir effacé le formulaire de recherche (en cliquant/tappant sur l'icône x) garder le clavier visible !

Pour ce faire, appliquez stopPropagation() sur l'événement comme ceci :

function clear ($event) {
    $event.preventDefault();
    $event.stopPropagation();
    self.query = '';
    $timeout(function () {
        document.getElementById('sidebar-search').focus();
    }, 1);
}

Et le formulaire HTML :

<form ng-controller="SearchController as search"
    ng-submit="search.submit($event)">
        <input type="search" id="sidebar-search" 
            ng-model="search.query">
                <span class="glyphicon glyphicon-remove-circle"
                    ng-click="search.clear($event)">
                </span>
</form>

Answer 2

UPDATE

J'ai également essayé ceci, mais sans succès :

$(document).ready(function() {
$('body :not(.wr-dropdown)').bind("click", function(e) {
    $('.test').focus();
})
$('.wr-dropdown').on('change', function(e) {
    if ($(".wr-dropdow option[value='/search']")) {
        setTimeout(function(e) {
            $('body :not(.wr-dropdown)').trigger("click");
        },3000)         
    } 
}); 

}) ;

Je ne comprends pas pourquoi vous dites que cela ne fonctionne pas car votre JSFiddle fonctionne très bien, mais voici quand même ma suggestion...

Essayez cette ligne de code dans votre fonction SetTimeOut sur votre événement de clic :

document.myInput.focus();

myInput correspond à l'attribut name de la balise input.

<input name="myInput">

Et utilisez ce code pour brouiller le champ :

document.activeElement.blur();

Answer 3

Essayez ça :

input.focus();
input.scrollIntoView()

Answer 4

Essayez d'utiliser l'événement on-tap au lieu de l'événement ng-click. J'ai eu ce problème. Je l'ai résolu en plaçant mon bouton clear-search-box à l'intérieur du label du formulaire de recherche et en remplaçant ng-click du bouton clear par on-tap. Cela fonctionne bien maintenant.