web-dev-qa-db-fra.com

empêcher le clavier par défaut de l'iphone lors de la mise au point d'une <entrée>

voici comment j'essaye

<script type="text/javascript">
     $(document).ready(function(){
        $('#dateIn,#dateOut').click(function(e){
            e.preventDefault();
        }); 
     });
</script>

mais le clavier de l'iPhone 'lancement encore' entrée

ps: je veux faire cela parce que j'utilise le plugin datepicker pour la date

javascriptjqueryiphonekeyboard
76
Toni Michel Caubet

En définissant le champ de saisie sur readonly="true" vous devez empêcher quiconque de taper quoi que ce soit, mais pouvoir néanmoins lancer un événement de clic dessus.

Ceci est également utile dans les appareils non mobiles puisque vous utilisez un sélecteur de date/heure

206
Rene Pot

Vous pouvez ajouter une fonction de rappel à votre DatePicker pour lui demander de flouter le champ de saisie avant d'afficher DatePicker.

$('.selector').datepicker({
   beforeShow: function(){$('input').blur();}
});

Remarque: le clavier iOS apparaît pendant une fraction de seconde, puis se cache.

9
nachomaans

J'ai posé une question similaire ici et j'ai obtenu une réponse fantastique - utilisez le datepicker pour iPhone - c'est génial.

Comment désactiver le clavier de l'iPhone pour un champ de saisie spécifié sur une page Web

Synopsis/pseudo-code:

if small screen mobile device 

  set field type to "date" - e.g. document.getElementById('my_field').type = "date";
  // input fields of type "date" invoke the iPhone datepicker.

else

  init datepicker - e.g. $("#my_field").datepicker();

La raison de la définition dynamique du type de champ sur "date" est que Opera affichera son propre datepicker natif, et je suppose que vous voulez afficher le datepicker de manière cohérente sur les navigateurs de bureau.

5
John Vance

Comme je ne peux pas commenter le commentaire en haut, je suis obligé de soumettre une "réponse".

Le problème avec la réponse sélectionnée est que le fait de définir le champ en lecture seule le sort de l'ordre de tabulation sur l'iPhone. Donc, si vous aimez entrer dans les formulaires en cliquant sur "suivant", vous passerez directement sur le champ.

3
John Vance

La meilleure façon de résoudre ce problème selon mon opinion est d'utiliser "ignoreReadonly".

Assurez-vous d'abord que le champ de saisie est en lecture seule, puis ajoutez ignoreReadonly: true. Cela garantira que même si le champ de texte est en lecture seule, une fenêtre contextuelle apparaîtra.

$('#txtStartDate').datetimepicker({
            locale: "da",
            format: "DD/MM/YYYY",
            ignoreReadonly: true
        });
        $('#txtEndDate').datetimepicker({
            locale: "da",
            useCurrent: false,
            format: "DD/MM/YYYY",
            ignoreReadonly: true
        });
});
2
Akbar Badhusha

Le code ci-dessous fonctionne pour moi:

<input id="myDatePicker" class="readonlyjm"/>


$('#myDatePicker').datepicker({
/* options */
});

$('.readonlyjm').on('focus',function(){
$(this).trigger('blur');
});
2
Juan Manuel De Castro

@ rene-pot est correct. Vous aurez toutefois un signe d'interdiction sur la version de bureau du site Web. Pour contourner ce problème, appliquez readonly = "true" à une div qui apparaîtra uniquement sur la vue mobile et non sur le bureau. Découvrez ce que nous avons fait ici http://www.naivashahotels.com/naivasha-hotels/lake-naivasha-country-club/

0
DaviD.K

Voici donc ma solution (similaire à la réponse de John Vance):

Allez d'abord ici et obtenez une fonction pour détecter les navigateurs mobiles.

http://detectmobilebrowsers.com/

Ils ont de nombreuses façons différentes de détecter si vous êtes sur mobile, alors trouvez-en une qui fonctionne avec ce que vous utilisez.

Votre page HTML (pseudo code):

If Mobile Then
    <input id="selling-date" type="date" placeholder="YYYY-MM-DD" max="2999-12-31" min="2010-01-01" value="2015-01-01" />
else
    <input id="selling-date" type="text" class="date-picker" readonly="readonly" placeholder="YYYY-MM-DD" max="2999-12-31" min="2010-01-01" value="2015-01-01" />

JQuery:

$( ".date-picker" ).each(function() {
    var min = $( this ).attr("min");
    var max = $( this ).attr("max");
    $( this ).datepicker({ 
        dateFormat: "yy-mm-dd",  
        minDate: min,  
        maxDate: max  
    });
});

De cette façon, vous pouvez toujours utiliser les sélecteurs de date natifs dans mobile tout en définissant les dates min et max.

Le champ non mobile doit être lu uniquement, car si un navigateur mobile tel que chrome pour ios "demande une version de bureau"), il peut contourner la vérification mobile et vous souhaitez toujours empêcher le clavier de s'afficher. up.

Toutefois, si le champ est en lecture seule, un utilisateur pourrait avoir l’impression de ne pas pouvoir le modifier. Vous pouvez résoudre ce problème en modifiant le code CSS pour lui donner l’impression qu’il n’est pas en lecture seule (c’est-à-dire changer la couleur de la bordure en noir) mais si vous ne modifiez pas le code CSS pour toutes les balises d’entrée, vous aurez du mal à maintenir l’aspect cohérent. navigateurs.

Pour obtenir que je viens d'ajouter un bouton d'image de calendrier au sélecteur de date. Il suffit de changer un peu votre code JQuery:

$( ".date-picker" ).each(function() {
    var min = $( this ).attr("min");
    var max = $( this ).attr("max");
    $( this ).datepicker({ 
        dateFormat: "yy-mm-dd",  
        minDate: min,  
        maxDate: max,
        showOn: "both",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true,
        buttonText: "Select date"
    });
});

Remarque: vous devrez trouver une image appropriée.

0
Curtis