web-dev-qa-db-fra.com

le clavier de l'iPhone ne se cache pas lorsque vous appuyez sur l'écran

J'ai un champ de saisie avec un type de numéro

<input type="number" pattern="[0-9]*"/>

Dans les navigateurs normaux, je tape quelques chiffres et je tape sur l'écran, il cache le clavier de l'iphone/ipad.

Mais cela ne fonctionne pas si c'est dans iframe. nous devons cliquer explicitement sur le bouton Terminé. Ce problème concerne uniquement l'iphone/ipad

Il s'agit d'un problème d'iframe. Tout correctif utilisant Javascript/Jquery serait très apprécié.

mis à jour

A essayé

 document.activeElement.blur();

et focusout lorsque l'événement est déclenché en javascript. aucun ne fonctionne ..

   $(document).on('focusin', function(){
     $('input').css("background-color", "green");
      console.log('focusin!')
     });

  $(document).on('focusout', function(){
      console.log('focusout!')
     $('input').css("background-color", "yellow");
      $('input').blur();
     });

focusout n'appelle pas à l'intérieur de l'iframe!

Ma question est **How to force close ipad/iphone keypad when input element is not focused using Javascript/Jquery?**

Les réponses seront récompensées comme indiqué!

javascriptjqueryiosiphoneiframe
24
UI_Dev

Pour supprimer le clavier, vous devez perdre le focus sur votre saisie.

document.activeElement.blur();

Avec cette ligne, vous supprimez le focus et le clavier disparaît.

Dans votre cas, il est possible d'ajouter un événement sur votre corps et d'arrêter cet événement si vous cliquez sur une entrée.

$(document).ready(function () {
  $('body').click(function () {
    document.activeElement.blur();
    console.log("blur");
  });

  $('input').click(function (event) {
    event.stopPropagation();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text"/>

Mise à jour

J'ai trouvé cela réponse pour obtenir un élément actif dans un iframe.

/**
 * Return the active element in the main web or iframes
 * @return HTMLElement
 **/
function getActiveElement() {
  var focused = false;

  // Check if the active element is in the main web or no
  if (document.body === document.activeElement ||
    document.activeElement instanceof HTMLIFrameElement) {

    // Search in iframes
    $('iframe').each(function() {
      var element = this.contentWindow.document.activeElement;
      // If there is a active element
      if (element !== this.contentWindow.document.body) {
        focused = element;
        return false; // Stop searching
      }
    });

  } else focused = document.activeElement;

  return focused; // Return element
}

Avec cette fonction, vous pouvez obtenir l'élément actif sur le document ou dans un iframe.

Après, vous devez supprimer le focus sur cet élément pour masquer le clavier.

 getActiveElement().blur();
5
R3tep

cible html <input> et <textarea>, iphone et ipad ne masqueront pas le clavier lorsque vous tapotez sur une zone vide; mais Android le fera! nous devons masquer le clavier à la main - cela signifie définir le flou d'entrée;

voici le code

$(function(){

    var cacheInput = null;
    var timer = null;
    if(!isApple()){
        return false;
    }
    $(document).on('focus','input',function(e){
        cacheInput = e.target;
    })
    $(document).on('focus','textarea',function(e){
        cacheInput = e.target;
    })
    $(document).on('touchend',function(e){
        if(e.target.tagName!=='INPUT'&&e.target.tagName!=='TEXTAREA'){
            if(cacheInput!==null){
                timer = setTimeout(function(){
                    cacheInput.blur();
                    clearTimeout(timer);
                },300)
            }
        }
    })
    function isApple(){
        var ua = navigator.userAgent.toUpperCase();
        var 
          ipad = ua.indexOf('IPAD')>-1,
          iPod = ua.indexOf('iPod')>-1,
          iphone = ua.indexOf('IPHONE')>-1 ;
        return   ipad || iPod || iphone ;
    }
})

github: https://github.com/wikieswan/iphone-input-blur

démo: http://wikieswan.github.io/iphone-input-blur

3
wikieswan

Dans une application ionic, j'ai utilisé une directive sur le corps qui intercepte les entrées.

MyApp.directive('dismissIosKeyboardOnClick', function () {
        return function (scope, element, attrs) {
          if (cordova.platformId=="ios") {
            element.on("touchstart", function(e) {
              var keyboardDoms = new Set(["INPUT","TEXTAREA","SELECT"]);
              if( keyboardDoms.has(document.activeElement.nodeName) &&
                  !keyboardDoms.has(e.target.nodeName) )
                document.activeElement.blur();
              });
            }
        };
      });

Index.html

<body ... dismiss-ios-keyboard-on-click></body>
2
jrobichaud

J'espère que cela résoudra votre problème, cela supprimera simplement l'accent sur l'élément actif.

  • Utiliser Javascript
 document.activeElement.blur();
  • Utilisation de jQuery
 $("#Clicked_button_id").click(function() {
    $("#input_field_id").blur();                               
});
1
Mumthezir VP

Eh bien ... Vous pouvez me donner cette récompense car je viens de résoudre ce problème en utilisant un très [~ # ~] simple [~ # ~] solution.

Étape 1: Vérifiez si l'entrée est actuellement au point. J'expliquerai plus tard pourquoi nous devons ajouter un délai pour changer la valeur de la variable inputFocused.

var inputFocused = false;
$('input').focus(function(){
        setTimeout(function(){
            inputFocused = true;
        },100);
    });

Étape 2: Ajoutez un écouteur d'événements si l'écran ou $(window) est tapé ou cliqué. Si la fenêtre a été tapée ou cliquée, vérifiez si l'entrée est actuellement au point. Si true vous devez focaliser la fenêtre $(window).focus(), après avoir focalisé la fenêtre, la fonction blur () fonctionnera maintenant! de sorte que vous pouvez maintenant défocaliser l'élément d'entrée, le clavier se cachera alors automatiquement, puis redéfinira la variable inputFocused sur false.

$(window).click(function(){
    if(inputFocused == true){
        $(window).focus();
        var input = $('input');
        input.blur();
        inputFocused = false;
    }
});`

Explication de SetTimeout: L'événement $(window).click() se déclenchera si l'utilisateur tapote ou clique n'importe où sur l'écran (par exemple clic de bouton, clic d'entrée, tapotement ou cliquez sur l'écran, etc. ). Si vous appuyez sur l'entrée, en même temps que vous définissez inputFocused sur true, l'événement $(window).click() se déclenche, puis vérifiez si inputFocused est - true exécutera alors le code qui cache le clavier virtuel. Cela signifie donc que chaque fois que vous concentrez un champ de saisie, le clavier se cache et ce sera un problème.

C'est pourquoi nous ajoutons un délai afin que le code à l'intérieur de if(inputFocused == true) ne s'exécute pas pendant que nous concentrons le champ d'entrée et qu'il ne s'exécute que si le champ d'entrée est actuellement sur le focus.

ESSAYÉ ET TESTÉ!

0
Vashtamyty

Essaye ça. Cela détecte lorsque vous tabulez n'importe quel élément, mais l'entrée, puis le brouille.

$("html").children().not("#input_field_id").click(function(){
  $("#input_field_id").blur();
});
0
James McDowell

Je pourrais éventuellement avoir une solution à votre problème sur iOS. Ma configuration est safari sur iOS 8.3/5C.

D'après mes expériences, il me semble que l'élément de corps dans Safari/iOS n'est pas réceptif aux événements de clic. Je ne suis pas en mesure d'expliquer pourquoi mais il semble que oui.

Donc, ce que j'ai fait est de: mettre un div wrapper juste à l'intérieur du corps et lui permettre de recevoir le clic.

Main.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>keyboard hide issue</title>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
    $(document).ready(function() {
        //!SOLUTION
        $('#body-wrapper').click(function(e) {
            console.log('I got clicked');
        });        
    });
</script>
<style>
/* ignore this. Its just styles. ... */
div#body-wrapper {
    height: 200px;
    width: 100%;
    background-color: red;
}
input {
    margin: 10px;
}

</style>
</head>
<body>
    <div id="body-wrapper">
        <input type="text" id="main-input1"/>
        <input type="number" id="main-input2"/>
        <input type="email" id="main-input3"/>
    </div>
    <iframe src="blur.html"></iframe>
</body>
</html>

blur.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Blur iFrame</title>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {   
        //!SOLUTION
        $('#wrapper').click(function(e) {
            //do nothing 
        });        
    });
</script>
<style>
/* ignore this. Its just styles. ... */
div#wrapper {
    height: 100px;
    width: 100%;
    background-color: yellow;
}
</style>
</head>
<body>
    <div id="wrapper">
        <input type="number" pattern="[0-9]*" id="main-input"/>
    </div>
    </body>
</html>

Dans les deux fichiers, je peux très bien masquer le clavier. Encore une fois, je ne connais pas la raison sous-jacente, mais faites-moi savoir si vous n'êtes pas en mesure de reproduire la solution.

Je ne l'ai pas essayé sur iPad. Merci ...

0
tyskr