Verhindern Sie die Standardtastatur des iPhones, wenn Sie einen <Eingang> fokussieren

So versuche ich es

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

Aber die Eingabe "startet" immer noch die Tastatur des iPhones

ps: ich möchte dies tun, weil ich das datepicker plugin für date benutze

Durch Hinzufügen des Attributs readonly(oder readonly="readonly") zum Eingabefeld sollten Sie verhindern, dass jemand etwas eingibt, aber dennoch ein Klickereignis darauf starten können.

Dies ist auch bei nicht mobilen Geräten nützlich, da Sie eine Datums- / Zeitauswahl verwenden

Sie können Ihrem DatePicker eine Rückruffunktion hinzufügen, um ihn anzuweisen, das Eingabefeld zu verwischen, bevor der DatePicker angezeigt wird.

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

Hinweis: Die iOS-Tastatur wird für den Bruchteil einer Sekunde angezeigt und dann ausgeblendet.

Da ich den obersten Kommentar nicht kommentieren kann, bin ich gezwungen, eine "Antwort" einzureichen.

Das Problem mit der ausgewählten Antwort besteht darin, dass durch Festlegen des Felds auf schreibgeschützt das Feld aus der Registerkartenreihenfolge auf dem iPhone entfernt wird. Wenn Sie also gerne Formulare eingeben, indem Sie auf "Weiter" klicken, überspringen Sie das Feld.

Ich habe hier eine ähnliche Frage gestellt und eine fantastische Antwort erhalten - benutze den nativen iPhone-Datepicker - es ist großartig.

So deaktivieren Sie die iPhone-Tastatur für ein bestimmtes Eingabefeld auf der Webseite

Synopsis / Pseudocode:

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();

Der Grund für die dynamische Einstellung des Feldtyps auf "Datum" besteht darin, dass Opera andernfalls einen eigenen nativen Datumspicker anzeigt. Ich gehe davon aus, dass Sie den Datumspicker in Desktop-Browsern konsistent anzeigen möchten.

Der folgende Code funktioniert für mich:

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


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

$('.readonlyjm').on('focus',function(){
$(this).trigger('blur');
});

Der beste Weg, dies nach meiner Meinung zu lösen, ist die Verwendung von "ignoreReadonly".

Machen Sie das Eingabefeld zuerst schreibgeschützt und fügen Sie dann ignoreReadonly: true hinzu. Dadurch wird sichergestellt, dass das Popup angezeigt wird, auch wenn das Textfeld schreibgeschützt ist.

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

Hier ist meine Lösung (ähnlich der Antwort von John Vance):

Gehen Sie zuerst hierher und rufen Sie eine Funktion zum Erkennen mobiler Browser auf.

http://detectmobilebrowsers.com/

Sie haben viele verschiedene Möglichkeiten, um zu erkennen, ob Sie mobil sind. Suchen Sie also eine, die mit Ihrer Verwendung funktioniert.

Ihre HTML-Seite (Pseudocode):

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  
    });
});

Auf diese Weise können Sie weiterhin native Datumsauswahlfunktionen in Mobilgeräten verwenden, während Sie die minimalen und maximalen Datumsangaben in beide Richtungen festlegen.

Das Feld für Nicht-Mobilgeräte sollte nur gelesen werden, da ein mobiler Browser wie Chrome für iOS "eine Desktop-Version anfordert", die mobile Überprüfung umgehen kann und Sie dennoch verhindern möchten, dass die Tastatur angezeigt wird.

Wenn das Feld jedoch schreibgeschützt ist, kann es für einen Benutzer so aussehen, als könne er das Feld nicht ändern. Sie können dies beheben, indem Sie das CSS so ändern, dass es nicht schreibgeschützt ist (dh die Rahmenfarbe in Schwarz ändern). Wenn Sie jedoch das CSS nicht für alle Eingabe-Tags ändern, fällt es Ihnen schwer, das Erscheinungsbild konsistent zu halten Browser.

Um dies zu umgehen, füge ich der Datumsauswahl einfach eine Kalenderbildschaltfläche hinzu. Ändern Sie einfach Ihren JQuery-Code ein wenig:

$( ".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"
    });
});

Hinweis: Sie müssen ein geeignetes Bild finden.

@ Ren-Pot ist richtig. Sie haben jedoch ein nicht erlaubtes Zeichen auf der Desktop-Version der Website. Um dies zu umgehen, wenden Sie readonly = "true" auf ein div an, das nur in der mobilen Ansicht und nicht auf dem Desktop angezeigt wird. Sehen Sie hier, was wir gemacht haben http://www.naivashahotels.com/naivasha-hotels/lake-naivasha-country-club/

Ich habe ein kleines generisches "No Keyboard" -Skript - funktioniert für mich mit Android und iPhone:

  $('.readonlyJim').on('focus', function () {
      $(this).trigger('blur')
  })

readonlyJimFügen Sie dem Eingabe-Tag und voila einfach add class hinzu.

(* Sorry zu viel StarTrek hier)