application web pour ipad : Comment empêcher le clavier de s'afficher sur l'indicateur de date jquery ?

Question

J'ai un formulaire avec un champ de date auquel est attaché un sélecteur de date jquery.

Lorsque je sélectionne le champ de la date, le sélecteur de date s'affiche, mais le clavier de l'iPad glisse et masque le sélecteur de date.

Comment puis-je empêcher le clavier de s'afficher dans cette situation ?

Answer 1

J'ai utilisé une version légèrement modifiée de la solution de Rob Osborne et j'ai réussi à empêcher le clavier de s'afficher 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);
    }
});

Answer 2

Au lieu de désactiver l'entrée, donnez-lui une propriété "readonly". C'est mieux que de la désactiver car vous pouvez enregistrer le formulaire sans le modifier.

En voici plus info sur la lecture seule .

Answer 3

C'est ainsi que j'ai réussi à régler ce problème en faisant en sorte que le navigateur pense que l'utilisateur a brouillé l'entrée et qu'il cache le clavier avant qu'il n'ait le temps de s'afficher :

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

Cela fonctionne bien pour moi là où beaucoup d'autres solutions que j'ai trouvées n'ont pas fonctionné !

Answer 4

J'ai utilisé une combinaison de CDeutsch et des réponses de Rob pour désactiver le champ de saisie lorsque l'utilisateur clique sur le calendrier, puis activer le champ 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 l'utilisateur peut modifier la date manuellement en cliquant dans le champ de saisie, ce qui fait apparaître le clavier de l'iPad, ou utiliser le sélecteur de date en cliquant sur le bouton de la date.

Encore une fois, merci pour toutes les contributions sur ce problème, j'étais bloqué sur ce même problème jusqu'à ce que je lise les messages ci-dessus.

Answer 5

Je n'ai pas trouvé de moyen de le faire, mais j'ai fini par utiliser un contournement acceptable en utilisant la fonction buttonImage avec buttonImageOnly, puis en désactivant 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 effectuez cette opération sur un formulaire, veillez à réactiver le champ avant de soumettre ou de sérialiser le formulaire, sinon la valeur ne sera pas envoyée (sur l'iPad du moins). Je fais ce qui suit dans ma fonction de soumission :

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