web-dev-qa-db-fra.com

cacher le clavier dans iphone safari webapp

Je crée une application Web pour iPhone basée sur HTML/CSS/JS. J'utilise des formulaires pour recevoir des données et transmettre des données au script, mais l'un des problèmes que je rencontre est que le clavier ne disparaît pas. L'utilisateur entrera l'information, cliquera sur soumettre et puisqu'il s'agit de JavaScript, la page ne se recharge pas. Le clavier reste en place, ce qui est une nuisance et ajoute une étape supplémentaire pour les utilisateurs (le fermer).

Existe-t-il un moyen de forcer le clavier dans Safari à partir? Pour l’essentiel, j’ai le sentiment que cette question revient à demander comment je peux forcer une zone de saisie à perdre le focus ou à être floue. En recherchant en ligne, je trouve plein d'exemples pour détecter l'événement de flou, mais aucun pour forcer cet événement à se produire.

iphonekeyboardweb-applicationsblur
29
munchybunch

Plus simplement encore, vous pouvez appeler blur () sur l’élément actuellement ciblé. $ ("# inputWithFocus"). flou ()

40
Steven
document.activeElement.blur();
38
iPadDeveloper2011

Vous pouvez essayer focus()ing sur un élément non textuel, tel que le bouton d'envoi.

25
ceejayoz

Voici un petit extrait de code qui masque toujours le clavier lorsque le focus est dans un champ de saisie ou de texte et que l'utilisateur appuie en dehors de cet élément (comportement normal des navigateurs de bureau).

function isTextInput(node) {
    return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}

document.addEventListener('touchstart', function(e) {
    if (!isTextInput(e.target) && isTextInput(document.activeElement)) {
        document.activeElement.blur();
    }
}, false);
16
Husky

Pour détecter quand le bouton de retour est enfoncé, utilisez:

$('input').bind('keypress', function(e) { if(e.which === 13) { document.activeElement.blur(); } });

3
Ben Southall

Je suis tombé sur ce problème et j'ai passé du temps à trouver une solution satisfaisante. Mon problème était légèrement différent de la question initiale, car je voulais ignorer l'événement d'entrée en appuyant sur l'extérieur de la zone d'élément d'entrée.

Les réponses proposées ci-dessus fonctionnent, mais je pense qu'elles ne sont pas complètes. Voici donc ma tentative au cas où vous atterririez sur cette page à la recherche de la même chose que moi:

Solution jQuery

Nous ajoutons un écouteur d'événement touchstart à l'ensemble du document. Lorsque l'écran est touché (peu importe qu'il s'agisse d'un tapotement, d'un appui ou d'un défilement), le gestionnaire sera déclenché et nous vérifierons ensuite:

  1. La zone touchée représente-t-elle l'entrée?
  2. L'entrée est-elle ciblée? 

Étant donné ces deux conditions, nous déclenchons ensuite un événement blur() pour supprimer le focus de l'entrée.

ps: j'étais un peu paresseux alors copiez simplement la ligne de la réponse ci-dessus, mais vous pouvez utiliser le sélecteur jQuery pour document si vous voulez conserver la cohérence du code}

$(document).on('touchstart', function (e) {
  if (!$(e.target).is('.my-input') && $('.my-input').is(':focus')) {
    document.activeElement.blur();
  }
});

Solution Hammer.JS

Sinon, vous pouvez utiliser Hammer.JS pour gérer vos gestes tactiles. Supposons que vous souhaitiez ignorer cet événement lors d'un événement tap, mais que le clavier soit présent si les utilisateurs font défiler la page (ou maintenons une sélection de texte maintenue pour le copier et le coller dans votre zone de saisie).

Dans cette situation, la solution serait:

var hammer = new Hammer(document.body);
hammer.on('tap', function(e) {
  if (!$(e.target).is('.search-input') && $('.search-input').is(':focus')) {
    document.activeElement.blur();
  }
});

J'espère que ça aide!

2
rafg
$('input:focus').blur();

en utilisant l'attribut CSS pour l'élément focalisé, cela efface toute entrée actuellement active, en supprimant le clavier.

2
Design by Adrian

Assurez-vous de définir, en CSS:

body {
  cursor: pointer;
}

sinon, votre gestionnaire d’appel appelant document.activeElement.blur() ne sera jamais renvoyé. Pour plus d'informations, voir: http://www.shdon.com/blog/2013/06/07/why-your-click-events-don-t-work-on-mobile-safari

0
davidgoli

Pour ceux qui utilisent le code Husky dans AngularJs, voici la réécriture:

function isTextInput(node) {
    return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}

angular.element($document[0]).on('touchstart', function(e) {
  var activeElement = angular.element($document[0].activeElement)[0];
  if(!isTextInput(e.target) && isTextInput(activeElement)) {
    activeElement.blur();
  }
});
0
Tyler Moses