ben böyle deniyorum

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

ancak giriş hala iphone'un klavyesini 'başlatıyor'

ps: Bunu yapmak istiyorum çünkü tarih için datepicker eklentisi kullanıyorum

Özniteliği readonly(veya readonly="readonly") giriş alanına ekleyerek, herhangi birinin içine bir şey yazmasını engellemeniz gerekir, ancak yine de üzerinde bir tıklama etkinliği başlatabilirsiniz.

Bu, bir tarih / saat seçiciyi kullandığınız için mobil olmayan cihazlarda da yararlıdır.

DatePicker'ınızı göstermeden önce giriş alanını bulanıklaştırmasını söylemek için DatePicker'ınıza bir geri arama işlevi ekleyebilirsiniz.

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

Not: iOS klavyesi bir saniyeden kısa bir süre için görünecek ve ardından gizlenecektir.

En üstteki yoruma yorum yapamayacağım için bir "yanıt" göndermeye mecburum.

Seçilen yanıtla ilgili sorun, alanın salt okunur olarak ayarlanmasının, alanı iPhone'daki sekme sırasının dışına çıkarmasıdır. Dolayısıyla, "ileri" ye basarak formları girmeyi seviyorsanız, doğrudan alanın üzerinden atlayacaksınız.

Burada benzer bir soru sordum ve harika bir yanıt aldım - iPhone yerel veri seçiciyi kullanın - harika.

Web sayfasındaki belirli bir giriş alanı için iPhone tuş takımı nasıl kapatılır

Özet / sözde kod:

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

Alan türünü dinamik olarak "tarih" olarak ayarlamanın nedeni, aksi takdirde Opera'nın kendi yerel veri seçicisini açmasıdır ve tarih seçiciyi masaüstü tarayıcılarda tutarlı bir şekilde göstermek istediğinizi varsayıyorum.

Aşağıdaki kod benim için çalışıyor:

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


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

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

Bence bunu çözmenin en iyi yolu "ignoreReadonly" kullanmaktır.

Önce giriş alanını salt okunur yapın, ardından ignoreReadonly: true ekleyin. Bu, metin alanı salt okunur olsa bile açılır pencerenin gösterilmesini sağlayacaktır.

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

inputmode niteliği

<input inputmode='none'>

inputmodeKüresel nitelik Bir numaralandırılmış niteliktir o öğeyi veya içeriğini düzenlerken kullanıcı tarafından girilen olabilir veri türüne de ipuçları. Aşağıdaki değerlere sahip olabilir:

none- Sanal klavye yok. Sayfanın kendi klavye giriş kontrolünü uyguladığı zamanlar için.

Bunu başarıyla kullanıyorum ( Chrome / Android'de test edildi )

CSS Hileleri: Giriş modu Hakkında Bilmek İstediğiniz Her Şey

İşte benim çözümüm (John Vance'in cevabına benzer):

Önce buraya gidin ve mobil tarayıcıları algılamak için bir işlev edinin.

http://detectmobilebrowsers.com/

Mobil cihazda olup olmadığınızı tespit etmenin birçok farklı yolu vardır, bu nedenle kullandığınızla çalışan bir tane bulun.

HTML sayfanız (sözde kod):

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

Bu şekilde, mobil cihazlarda yerel tarih seçicileri kullanmaya devam ederken minimum ve maksimum tarihleri ​​her iki şekilde de ayarlayabilirsiniz.

Mobil olmayanlar için alan yalnızca okunmalıdır, çünkü ios için Chrome gibi bir mobil tarayıcı "masaüstü sürümü isterse" mobil kontrolü aşabilir ve yine de klavyenin görünmesini engellemek isteyebilirsiniz.

Ancak alan salt okunursa, kullanıcıya alanı değiştiremeyecekmiş gibi bakabilir. Bunu, CSS'yi salt okunur gibi görünmeyecek şekilde değiştirerek düzeltebilirsiniz (yani, kenarlık rengini siyaha çevirebilirsiniz), ancak tüm giriş etiketleri için CSS'yi değiştirmediğiniz sürece, görünümü tutarlı tutmakta zorlanacaksınız. tarayıcılar.

Tarih seçiciye bir takvim resmi düğmesi eklemem yeterli. JQuery kodunuzu biraz değiştirin:

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

Not: uygun bir resim bulmanız gerekecek.

@ rene-pot doğru. Bununla birlikte, web sitesinin masaüstü sürümünde izin verilmeyen bir işaretiniz olacak. Bunu aşarak, readonly = "true" değerini, masaüstünde değil, yalnızca mobil görünümde gösterilecek bir div öğesine uygulayın. Burada neler yaptığımızı görün http://www.naivashahotels.com/naivasha-hotels/lake-naivasha-country-club/

Küçük bir genel "klavyesiz" komut dosyam var - Android ve iPhone ile benim için çalışıyor:

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

readonlyJimGiriş etiketine ve işte sınıf ekleyin .

(* Burada çok üzgünüm StarTrek)