вот как я пытаюсь

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

Причина динамической установки типа поля на «date» заключается в том, что Opera в противном случае будет отображать собственный родной datepicker, и я предполагаю, что вы хотите последовательно отображать datepicker в настольных браузерах.

Ниже код работает для меня:

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