ipad application web: Comment puis-je empêcher le clavier de popping up sur datepicker de jquery
J'ai un formulaire avec un champ de date avec un datepicker de jquery attaché à elle.
Lorsque je sélectionne le champ de la date du datepicker pop-up, mais alors le clavier iPad se glisse dans la vue et masque le datepicker.
Comment puis-je empêcher le clavier de leur apparition dans cette situation?
Vous devez vous connecter pour publier un commentaire.
J'ai utilisé une version légèrement modifiée de Rob Osborne à la solution et il réussi à empêcher le clavier de popping up sur l'iPad et l'iPhone.
Au lieu de désactiver la saisie de lui donner un "readonly" de la propriété. C'est mieux de le désactiver car vous pouvez enregistrer le formulaire sans le modifier.
Ici est plus infos sur readonly.
C'est comment j'ai réussi à résoudre ce problème en faisant le navigateur pense que l'utilisateur estompée l'entrée afin qu'il cache le clavier avant qu'il ait le temps de montrer :
Fonctionne bien pour moi, où de nombreuses autres solutions que j'ai trouvées n'ont pas !
J'ai utilisé une combinaison de CDeutsch et Rob réponses pour désactiver le champ de saisie lorsque l'utilisateur clique sur le calendrier, puis activer le champ après le sélecteur de date ferme comme suit:
L'avantage est que cela permet à l'utilisateur de modifier la date manuellement en cliquant dans le champ de saisie " qui apporte de l'iPad clavier ou utilisez le sélecteur de date en cliquant sur le bouton de date.
Encore une fois merci pour tous les bons commentaires sur ce problème, j'ai été coincé sur cette même question jusqu'à ce que la lecture de la ci-dessus affiche.
Si vous êtes à l'aide de la date-timepicker le "beforeShow' option n'est pas disponible. Seulement l'ajout de la 'readonly' attribut de l'entrée déposée sera complètement désactiver le sélecteur de date.
Solution est d'utiliser le 'readonly' attribut de l'élément et ajouter "ignoreReadonly: vrai" comme une option pour le sélecteur de date.
JS:
HTML:
N'ai pas découvrir un moyen de le faire, mais j'ai fini par utiliser une acceptables de travail autour de l'utilisation de la buttonImage fonctionnalité avec buttonImageOnly et de désactivation du champ de date.
Si vous le faites sur un formulaire, assurez-vous que vous ré-activer le champ avant de soumettre ou de la sérialisation de la forme ou de la valeur ne sera pas envoyé (sur iPad au moins). Je ne les suivants
dans ma fonction envoyer:
Trois heures maintenant et nulle part. Je n'ai pas d'Iphone donc j'essaye de le ci-dessus sur un téléphone android exécutant 2.3.
Sur mon téléphone, je reçois toujours le clavier à chaque fois, rien ne l'arrête et je ne peux pas l'utiliser en "lecture seule", comme on l'arrête mes asp.net4 /C# code-behind de la cuisson, ce qui est un peu cr#p mais c'est comment il est.
Donc ma première question est de faire de ces idées ne fonctionnent que sur un Iphone?
acclamations
Mise à jour
J'ai trouvé un moyen de rendre les réponses ci-dessus, le travail pour ASP.Net 4. donc pensé que je voudrais partager.
Semble que < asp:TextBox ID="quelque chose" ...> n'a pas d'incendie Javascript ou JQuery comme il est attribué un "spécial" ID comme "ctl00_content....." sur le côté serveur, ce qui n'est pas le même que le "#quelque chose" dans le code JQuery. Mais grâce à l'essai et de l'erreur à l'aide de ce message:-
Récupérer la valeur de l'asp:textbox avec JQuery
J'ai travaillé qu'à l'aide de celui-ci (avec grâce au-dessus affiche) sera flou de l'accent et de l'arrêt de téléphones mobiles montrant le clavier (atleast mon Android de toute façon 🙂
donc l'exemple simple suivant le code utilisé avec JQuery ci-dessus devraient aider les autres:
De cours "sDatepicker_changed' est votre code derrière le code.
Je peux aussi exécuter le datepicker pop up encore et utiliser mon code de fonction pour remplir une autre zone de texte avec une date de fin de 7 jours à compter de celui-ci.
Mise à jour 2
Il semblerait qu'il ne fonctionne que sur les téléphones mobiles! dans un navigateur, il lance un "la référence d'Objet n'est pas définie à une instance d'un objet" parce que asp.net a décidé la zone de texte n'existe pas après une publication mais exécute le JavaScript. Getting off topic afin de ne pas en dire plus.
Mise À Jour 3 - Ma Réponse
Tous triés maintenant 🙂 , ont entouré mon
<script>..</script>
avec un<Div>
et seulement visible si besoin pour exécuter leJavaScript
code, lorsque j'ai détecté c'est un appareil mobile, en utilisant:et
acclamations
Trev.
Je crois que cette solution pourrait fonctionner pour tous les différents date heure cueilleurs, mais je ne l'ai testé avec le sélecteur de date de XDSoft.
L'idée est de désactiver les événements de la souris (
pointer-events: 'none'
) sur lainput
élément de sorte que le clavier ne s'affiche pas, et puis ajouter unonclick
événement sur un parentdiv
qui s'enroule autour de lainput
élément. Leonclick
événement, puis ouvrez la date time picker.Exemple De Code
Il montre comment résoudre le problème lors de l'utilisation de XDSoft de datetimepicker.
La solution suppose que le
input
élément est enveloppé à l'intérieur d'undiv
élément.J'ai utilisé ce code et il fonctionne très bien...
".hasDatepicker" la classe est pour mon entrée qui détiennent le sélecteur de date
jQuery( document ).ready(function() {
Je crois que la meilleure façon de le faire dans les navigateurs modernes est d'utiliser inputmode="none". Voici le code HTML:
<input type="text" ... inputmode="none" />
Au moins sur Android Chrome c'est en permettant à mon datepicker (évidemment séparément initialisé via jQuery) de venir sur mon téléphone et le clavier ne pas venir.
Cela évite les problèmes possibles avec le domaine en lecture seule (ne pas être en mesure d'effacer la valeur, etc)
À l'aide de la dernière version du DatePicker, il est possible de faire comme ceci:
Veuillez noter toutefois, le clavier peut clignoter en bas de l'écran pendant une seconde jusqu'à ce que le blur() est promulguée.
'focus'
événement se passe avant la'show'
, vous devriez essayer avec elle pour éviter les clignotements 😉