tak się staram

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

ale wejście nadal „uruchamia” klawiaturę iPhone'a

ps: chcę to zrobić, ponieważ używam wtyczki datepicker do daty

Dodając atrybut readonly(lub readonly="readonly") do pola wejściowego, powinieneś uniemożliwić komukolwiek wpisywanie czegokolwiek w tym polu, ale nadal mieć możliwość uruchomienia zdarzenia kliknięcia w tym polu.

Jest to również przydatne na urządzeniach innych niż mobilne, ponieważ używasz selektora daty / godziny

Możesz dodać funkcję wywołania zwrotnego do DatePicker, aby nakazać mu rozmycie pola wejściowego przed wyświetleniem DatePicker.

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

Uwaga: klawiatura iOS pojawi się na ułamek sekundy, a następnie ukryje się.

Ponieważ nie mogę skomentować najwyższego komentarza, jestem zmuszony przesłać „odpowiedź”.

Problem z wybraną odpowiedzią polega na tym, że ustawienie pola tylko do odczytu powoduje usunięcie go z kolejności tabulatorów w telefonie iPhone. Jeśli więc lubisz wprowadzać formularze, naciskając „następny”, przeskoczysz bezpośrednio nad polem.

Zadałem tutaj podobne pytanie i otrzymałem fantastyczną odpowiedź - użyj natywnego datepickera iPhone'a - jest super.

Jak wyłączyć klawiaturę iPhone'a dla określonego pola wprowadzania na stronie internetowej

Streszczenie / pseudokod:

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

Powodem dynamicznego ustawiania typu pola na „date” jest to, że Opera w przeciwnym razie wyświetli własny natywny datepicker. Zakładam, że chcesz konsekwentnie pokazywać datepicker w przeglądarkach na komputerach stacjonarnych.

Poniższy kod działa u mnie:

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


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

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

Moim zdaniem najlepszym sposobem rozwiązania tego problemu jest użycie opcji „ignoreReadonly”.

Najpierw ustaw pole wejściowe tylko do odczytu, a następnie dodaj ignoreReadonly: true. Zapewni to, że nawet jeśli pole tekstowe jest tylko do odczytu, pojawi się wyskakujące okienko.

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

atrybut inputmode

<input inputmode='none'>

inputmodeAtrybut globalny jest atrybutem wyliczeniowy że wskazówki w rodzaju danych, które mogą być wprowadzone przez użytkownika podczas edycji elementu lub jego zawartości. Może mieć następujące wartości:

none- Brak wirtualnej klawiatury. Gdy strona implementuje własną kontrolkę wprowadzania danych z klawiatury.

Używam tego pomyślnie (testowane na Chrome / Android )

Sztuczki CSS: wszystko, co chciałeś wiedzieć o trybie wprowadzania

Oto moje rozwiązanie (podobne do odpowiedzi Johna Vance'a):

Najpierw przejdź tutaj i uzyskaj funkcję wykrywania przeglądarek mobilnych.

http://detectmobilebrowsers.com/

Mają wiele różnych sposobów wykrywania, czy korzystasz z telefonu komórkowego, więc znajdź taki, który działa z tym, czego używasz.

Twoja strona HTML (pseudokod):

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

W ten sposób możesz nadal korzystać z natywnych selektorów daty w telefonie komórkowym, jednocześnie ustawiając minimalną i maksymalną datę w obie strony.

Pole dla urządzeń innych niż mobilne powinno być tylko do odczytu, ponieważ jeśli przeglądarka mobilna, taka jak chrome dla ios, „żąda wersji na komputer”, może obejść sprawdzenie urządzenia mobilnego, a Ty nadal chcesz zapobiec wyświetlaniu klawiatury.

Jednak jeśli pole jest tylko do odczytu, może wyglądać na użytkownika, jakby nie mógł go zmienić. Możesz to naprawić, zmieniając CSS, aby wyglądał, jakby nie był tylko do odczytu (tj. Zmień kolor obramowania na czarny), ale jeśli nie zmienisz CSS dla wszystkich tagów wejściowych, trudno będzie zachować spójny wygląd przeglądarki.

Aby to zrozumieć, po prostu dodaję przycisk kalendarza do selektora dat. Po prostu zmień trochę swój kod 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"
    });
});

Uwaga: będziesz musiał znaleźć odpowiedni obraz.

@ rene-pot jest poprawne. Będziesz mieć jednak niedozwolony znak w wersji witryny na komputery. Aby obejść ten problem, zastosuj readonly = "true" do elementu div, który będzie wyświetlany tylko w widoku mobilnym, a nie na komputerze. Zobacz, co zrobiliśmy tutaj http://www.naivashahotels.com/naivasha-hotels/lake-naivasha-country-club/

Mam mały ogólny skrypt „bez klawiatury” - działa dla mnie z Androidem i iPhonem:

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

Po prostu dołącz add class readonlyJimdo znacznika wejściowego i voila.

(* Przepraszam za dużo StarTrek tutaj)