web-dev-qa-db-fra.com

application web ipad: comment empêcher le clavier d'apparaître sur jquery datepicker

J'ai un formulaire avec un champ de date avec un jpery datepicker attaché.

Lorsque je sélectionne le champ de date, le sélecteur de date apparaît, mais le clavier de l'iPad glisse à l'écran et masque le sélecteur de date.

Comment puis-je empêcher le clavier d'apparaître dans cette situation?

jqueryipadjquery-ui-datepicker
35
Rob Osborne

J'ai utilisé une version légèrement modifiée de la solution de Rob Osborne et elle a empêché le clavier d'apparaître sur l'iPad et l'iPhone.

$(".datePicker").datepicker({
    showOn: 'button',
    onClose: function(dateText, inst) 
    { 
        $(this).attr("disabled", false);
    },
    beforeShow: function(input, inst) 
    {
        $(this).attr("disabled", true);
    }
});
29
cdeutsch

Au lieu de désactiver l'entrée, attribuez-lui une propriété "en lecture seule". C’est mieux que de le désactiver car vous pouvez enregistrer le formulaire sans le modifier.

Voici plus infos sur readonly .

23
Miriam Salzer

C'est ainsi que j'ai réussi à gérer ce problème en faisant en sorte que le navigateur pense que l'utilisateur a estompé l'entrée pour qu'il cache le clavier avant qu'il n'ait le temps de montrer:

$('blabla')
    .datepicker(
    {
        /* options */
    })
    .on('focus',function()
    {
        $(this).trigger('blur');
    });

Cela fonctionne bien pour moi là où bon nombre des autres solutions que j'ai trouvées ne fonctionnaient pas!

11
rAthus

Si vous utilisez le date-timepicker l'option 'beforeShow' n'est pas disponible. Le seul ajout de l'attribut 'readonly' au fichier d'entrée désactive complètement le sélecteur de date. 

La solution consiste à utiliser l'attribut 'readonly' sur l'élément et à ajouter 'ignoreReadonly: true' comme option pour le sélecteur de date.

$(function() {
     $('#datetimepicker1').datetimepicker({
	format: 'MM-DD-YYYY',
	minDate: moment(),
	ignoreReadonly: true
     });
});
<div class='input-group date' id='datetimepicker1'>
  <input type='text' id="date" readonly style="cursor: default; background-color: #fff" class="form-control" />
  <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>

4
Jorgos

J'ai utilisé une combinaison de réponses de CDeutsch et de Rob pour désactiver le champ de saisie lorsque l'utilisateur clique sur le calendrier, puis l'activer après la fermeture du sélecteur de date comme suit:

$(".date").datepicker({
    showOn: "button",
    onClose: function(dateText, inst) { $(this).attr("disabled", false); },
    beforeShow: function(dateText, inst) { $(this).attr("disabled", true); },
    buttonImage: "/images/calendar.png",
    buttonImageOnly: true
});

L'avantage est que cela permet à l'utilisateur de modifier manuellement la date en cliquant dans le champ de saisie qui affiche le clavier de l'iPad ou d'utiliser le sélecteur de date en cliquant sur le bouton de la date.

Encore une fois merci pour tous les bons commentaires sur ce problème, j'étais bloqué sur ce même sujet jusqu'à la lecture des articles ci-dessus.

4
divby1

Je n'ai pas trouvé le moyen de le faire, mais j'ai fini par utiliser un moyen acceptable d'utiliser la fonctionnalité buttonImage avec buttonImageOnly, puis de désactiver le champ de date.

$("#id_date").datepicker({
        dateFormat: 'yy/mm/dd',
        showOn:"button",
        buttonImage: "/icons/calendar.gif",
        buttonImageOnly: true });
$('#id_date').attr("disabled", true);

Si vous le faites sur un formulaire, assurez-vous de réactiver le champ avant de soumettre ou de sérialiser le formulaire, sinon la valeur ne sera pas envoyée (sur iPad au moins). Je fais ce qui suitdans ma fonction d'envoi:

$('#id_date').attr("disabled", false);
var dataString = $('#the_form').serialize();
$.ajax({
     type: "POST",
     url: 'myurl',
     data: dataString,
     ...
1
Rob Osborne

Je crois que cette solution pourrait fonctionner pour tous les sélecteurs de date et heure différents, mais je ne l'ai testée qu'avec le sélecteur de date de XDSoft .

L'idée est de désactiver les événements de souris (pointer-events: 'none') sur l'élément input afin que le clavier n'apparaisse pas, puis d'ajouter un événement onclick sur un parent div entourant l'élément input. L'événement onclick devrait alors ouvrir le sélecteur de date et heure.

Exemple de code

Cela montre comment résoudre le problème lorsque vous utilisez datetimepicker de XDSoft.

La solution suppose que l'élément input est encapsulé dans un élément div.

(function($){
    var originalDateTimePicker = $.fn.datetimepicker;
    $.fn.datetimepicker = function(args){
        this.each(function(i, dateTimePicker){
            dateTimePicker = $(dateTimePicker);
            dateTimePicker.closest('div').on('click', function(e){ 
                dateTimePicker.trigger('open');
            });
            dateTimePicker.css({ 'pointer-events': 'none' });
        });
        return originalDateTimePicker.apply(this, arguments);
    };
})(window.jQuery||window.$);
0
Vegard

J'ai utilisé ce code et cela fonctionne très bien ... ". La classe hasDatepicker" est pour mon entrée qui contient le sélecteur de date

<script type="text/javascript">

jQuery (document) .ready (function () {

var ybdDatePick = jQuery( ".hasDatepicker" );

    jQuery(function() {
       ybdDatePick.datepicker({ }).attr('readonly','readonly');

       ybdDatePick.on('focus',function() {
            jQuery(this).trigger('blur');
             this.datepicker({ }).attr('readonly','readonly');

          }
        );

});
});

0
Yossi Ben-david

Trois heures maintenant et ça ne mène nulle part. Je n'ai pas d'Iphone, alors j'essaie ce qui précède sur un téléphone Android sous 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 utiliser «lecture seule», car il arrête mon code asp.net4/C # après le tir, ce qui est un peu cr # p mais c’est comme ça.

Ma première question est donc la suivante: ces idées ne fonctionnent-elles que sur les téléphones?

à votre santé

Mettre à jour

J'ai trouvé un moyen de faire en sorte que les réponses ci-dessus fonctionnent pour ASP.Net 4. J'ai donc pensé partager.

Il semble que <asp: TextBox ID = "quelquechose" ...> ne lance pas Javascript ou JQuery car un identifiant "spécial" comme "ctl00_content ....." lui est attribué, côté serveur, ce qui n’est pas le même. comme "quelque chose" dans le code JQuery. Mais grâce à des essais et des erreurs en utilisant cette publication: -

Récupère une valeur depuis asp: zone de texte avec JQuery

Je me suis rendu compte que l'utilisation de ce qui suit (avec l'aide de l'affiche ci-dessus) brouillera la mise au point et arrêtera les téléphones mobiles affichant le clavier (du moins mon Android de toute façon :)

$("#<%=sDatepicker.ClientID%>").focus(function () {
        $(this).blur();
    });

de sorte que l'exemple de code simple suivant utilisé avec JQuery ci-dessus devrait, espérons-le, aider les autres:

<asp:TextBox ID="sDatepicker" OnTextChanged="sDatepicker_changed" AutoPostBack="True" ReadOnly="False"></asp:TextBox>

Bien sûr, 'sDatepicker_changed' est votre code derrière le code.

 protected void sDatepicker_changed(object sender, EventArgs e)
{//do stuff here..}

Je peux également exécuter le menu contextuel Datepicker et utiliser la fonction code behind pour renseigner une autre zone de texte avec une date de fin à 7 jours à partir de celle-ci.

Mise à jour 2

Il semblerait que cela ne fonctionne que dans les téléphones mobiles! dans un navigateur, il renvoie une "référence d'objet non définie à une instance d'objet", car asp.net a décidé que la zone de texte n'existe pas après une publication, mais qu'elle exécute JavaScript. Abandonnant le sujet, je ne le dirai plus.

Mise à jour 3 - Ma réponse

Tous triés maintenant :), ont entouré mon <script>..</script> d'un <Div> et ne le rendent visible que s'il est nécessaire d'exécuter le code JavaScript, lorsque j'ai détecté qu'il s'agit d'un appareil mobile, en utilisant: 

bool IsMobile = Page.Request.Browser.IsMobileDevice;

et 

if (IsMobile == true)
{                
    mobileScript.Visible = true;
}

à votre santé

Trev.

0
FlashTrev