ось як я намагаюся

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

але вхід все ще "запускає" клавіатуру iphone

ps: я хочу це зробити, оскільки я використовую плагін datepicker для дати

Додаючи атрибут readonly(або readonly="readonly") до поля введення, ви повинні запобігти тому, щоб хто-небудь вводив щось у ньому, але все одно зможете запускати на ньому подію клацання.

Це також корисно на не мобільних пристроях, оскільки ви використовуєте інструмент вибору дати / часу

Ви можете додати функцію зворотного виклику до вашого DatePicker, щоб сказати йому розмити поле введення перед тим, як відображати DatePicker.

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

Примітка: Клавіатура iOS з’явиться на частку секунди, а потім сховається.

Оскільки я не можу коментувати найкращий коментар, я змушений подати "відповідь".

Проблема з вибраною відповіддю полягає в тому, що встановлення поля лише для читання виводить поле з порядку вкладок на iPhone. Отже, якщо вам подобається вводити форми, натискаючи «далі», ви пропустите прямо над полем.

Я задав подібне запитання тут і отримав фантастичну відповідь - використовуйте вбудований датапікер iPhone - це чудово.

Як вимкнути клавіатуру iPhone для вказаного поля введення на веб-сторінці

Зміст / псевдокод:

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

Причиною динамічного встановлення типу поля на "дата" є те, що Opera в іншому випадку вискакує власний власний датчик, і я припускаю, що ви хочете послідовно показувати датчик у браузерах настільних комп'ютерів.

Нижче код працює для мене:

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


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

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

Найкращий спосіб вирішити це, на мій погляд, - використання "ignoreReadonly".

Спочатку зробіть поле введення лише для читання, а потім додайте ignoreReadonly: true. Це забезпечить, що навіть якщо текстове поле буде лише для читання, з’явиться спливаюче вікно.

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

атрибут inputmode

<input inputmode='none'>

inputmodeГлобальний атрибут перечислимого атрибут , який натякає на тип даних , які можуть бути введені користувачем при редагуванні елемента або його вміст. Він може мати такі значення:

none- Немає віртуальної клавіатури. Коли сторінка реалізує власний контроль введення з клавіатури.

Я успішно використовую це (перевірено на Chrome / Android )

CSS-хитрощі: Все, що ви коли-небудь хотіли знати про режим введення

Тож ось моє рішення (подібно до відповіді Джона Венса):

Спочатку перейдіть сюди та отримайте функцію виявлення мобільних браузерів.

http://detectmobilebrowsers.com/

Вони мають безліч різних способів виявити, чи перебуваєте ви на мобільному, тож знайдіть той, який працює з тим, що ви використовуєте.

Ваша HTML-сторінка (псевдокод):

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

Таким чином, ви все ще можете використовувати рідні селектори дат у мобільних пристроях, одночасно встановлюючи мінімальну та максимальну дати в будь-який спосіб.

Поле для немобільних пристроїв слід читати лише тому, що якщо мобільний браузер, такий як chrome для ios, "вимагає настільну версію", вони можуть обійти мобільну перевірку, і ви все одно хочете, щоб клавіатура не відображалася.

Однак, якщо поле лише для читання, воно може виглядати для користувача так, наче він не може змінити поле. Ви можете виправити це, змінивши CSS, щоб зробити вигляд, що він не лише для читання (тобто змінити колір межі на чорний), але якщо ви не зміните CSS для всіх вхідних тегів, вам буде важко підтримувати вигляд узгодженим браузери.

Щоб зрозуміти, що я просто додаю кнопку зображення календаря до засобу вибору дати. Просто трохи змініть свій код 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"
    });
});

Примітка: вам доведеться знайти відповідне зображення.

@ rene-pot правильно. Однак ви матимете заборонений знак на настільній версії веб-сайту. Навколо цього застосуйте readonly = "true" до div, який відображатиметься лише у мобільному поданні, а не на робочому столі. Подивіться, що ми зробили тут http://www.naivashahotels.com/naivasha-hotels/lake-naivasha-country-club/

У мене є трохи загального сценарію "без клавіатури" - працює для мене з Android та iPhone:

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

Просто додайте клас додавання readonlyJim до вхідного тегу та вуаля.

(* Вибачте тут за StarTrek)