web-dev-qa-db-fra.com

Comment masquer le clavier dans la page jQueryMobile dans une application Phonegap?

J'ai un problème avec le clavier caché dans le simulateur iPhone. Mon code HTML:

<form id="my_form">
    <input type="search" id="searchBar" />
</form>

code jQuery:

$("#my_form").submit(function() {
  one = $('#searchBar').val();
  console.log(one);
  doSearch(one);
  return false;
});

Tout fonctionne comme j'ai besoin: je peux obtenir une valeur de formulaire et effectuer quelques Ajax. Mais lorsque la fonction renvoie false, le clavier virtuel du simulateur iPhone est toujours visible. Comment cacher le clavier? Y a-t-il une autre méthode pour le faire? Je dois transmettre des données au serveur à l'aide d'Ajax lorsque l'utilisateur effectue une recherche et appuie sur la touche "Aller" de l'iPhone. Le résultat de la recherche doit apparaître sur la même page (déjà fait). L'utilisateur peut à nouveau rechercher dans la même page.

Aidez-moi, s'il vous plaît.

Merci,

--regeint

jqueryjquery-mobilecordova
16
regeint

Merci Hosh Sadiq et techfoobar de m'avoir aidé. En fait, j’ai fait ce qui suit et cela a fonctionné. Cela n’a pas d’effet sur le CSS au-dessus ou au-dessous de cet élément.

$('.clr').after('<input type="checkbox" id="focusable" style="height:0; margin-left:-200px; clear: both;" />');
$('#focusable').focus();

Encore merci. :)

1
regeint

Au lieu de passer du focus à un autre élément, vous pouvez simplement brouiller votre entrée de la manière suivante:

$('#searchBar').blur();

Cela cachera le clavier virtuel.

32
vadimtrifonov

de ici

C'est assez explicite. La 2ème ligne déconcentrée de tous les champs de saisie et repose sur jQuery. J'ai trouvé que l'appel de flou () sur le champ de texte ciblé unique ne fonctionnait pas toujours. L'une ou l'autre de ces lignes doit fonctionner indépendamment, mais les deux ne peuvent pas être arrêtées ensemble!

var hideKeyboard = function() {
    document.activeElement.blur();
    $("input").blur();
};
17
Nisanth Sojan

Dans jQuery, si vous return false;, le comportement du navigateur par défaut sera arrêté. Dans ce cas, le formulaire est soumis et le clavier est fermé. Ce qui suit devrait fonctionner:

<form id="my_form">
    <input type="search" id="searchBar" />
    <div style="height:0;width:0;">
        <input id="focusable" type="checkbox" />
    </div>
</form>

jQuery:

$("#my_form").submit(function(){
    one = $('#searchBar').val();
    console.log(one);
    doSearch(one);
    $('#focusable').focus();
    return false;
});
2
Hosh Sadiq

Essayez d’ajouter un autre élément focusable (par exemple: un <select>) à votre page (définissez sa hauteur sur 0 pour qu’elle ne soit pas visible mais puisse être mise au point) et déplacez le focus sur cet élément avant de renvoyer false.

1
techfoobar

J'ai utilisé la solution regeint mais modifié un peu, cela ne fonctionne pas car j'ai dit à phonegap d'autoriser l'affichage du clavier sans interaction de l'utilisateur dans Cordova.plist j'ai défini KeyboardDisplayRequiresUserAction à NO

function hideTheKeyBoard() {
    $($.mobile.pageContainer).after('<input type="checkbox" id="focusable" style="height:0;margin-left:-200px;" />');
    $('#focusable').focus();// maybe .blur() would work too.
    $('#focusable').remove();
}
1
Shereef Marzouk

La méthode .blur() est probablement la plus efficace si vous ne perdez pas le focus. Mais que se passe-t-il si, par exemple, vous en avez besoin pour conserver une liste d’options ouverte, comme cela se produit dans une tête de frappe?.

Ci-dessous, vous pouvez voir la façon dont j'ai trouvé pour résoudre ce problème.

$('#keepMeFocused').click(function() {
  $(this).attr('type', 'text');
  $('#hideKeyboard').removeAttr('disabled');
  $('#msg').show();
});
$('#hideKeyboard').click(function() {
  $('#keepMeFocused').attr('type', 'button').focus();
  $('#hideKeyboard').attr('disabled', true);
});
#keepMeFocused {
  box-sizing: border-box;
  width: 200px;
  height: 24px;
  background: none;
  border: solid 1px #ccc;
  padding: 0 4px;
  text-align: left;
}

#hideKeyboard {
  height: 24px;
  background: #666;
  border: solid 1px #666;
  border-radius: 2px;
  color: #fff;
  vertical-align: top;
}

#hideKeyboard[disabled] {
  background: #ddd;
  border-color: #ddd;
}

#keepMeFocused:not(:focus) ~ #msg {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="keepMeFocused" type="text">
<button id="hideKeyboard" disabled>Hide Keyboard</button>
<p id="msg">Keep me visible while input has focus</p>

UPDATE: J'ai corrigé un petit bug dans le code et simplifié un peu le JS

0
Daniel Abril