Запретить клавиатуру по умолчанию iphone при фокусировке <input>

Ответ 1

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

Это также полезно на не мобильных устройствах, так как вы выбираете дату/время

Ответ 2

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

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

Примечание. Клавиатура iOS будет отображаться в течение секунды и затем спрячется.

Ответ 3

Я задал аналогичный вопрос здесь и получил фантастический ответ - используйте iPhone datepicker для 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 выведет собственный собственный дампикер в противном случае, и я предполагаю, что вы хотите последовательно отображать datepicker на настольных браузерах.

Ответ 4

Поскольку я не могу комментировать верхний комментарий, я вынужден отправить "ответ".

Проблема с выбранным ответом заключается в том, что установка поля для чтения только берет поле из порядка вкладок на iPhone. Поэтому, если вам нравится вводить формы, нажав "Далее", вы пропустите прямо над полем.

Ответ 5

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

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


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

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

Ответ 6

Лучший способ решить это, по моему мнению, - использовать "ignoreReadonly".

Сначала сделайте поле ввода readonly, затем добавьте ignoreReadonly: true. Это позволит убедиться, что даже если текстовое поле доступно только для чтения, появится всплывающее окно.

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

Ответ 7

Итак, вот мое решение (похоже на ответ Джона Вэнса):

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

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

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

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

Однако, если поле читается только, оно может выглядеть для пользователя, как будто они не могут изменить поле. Вы можете исправить это, изменив CSS, чтобы он выглядел так, будто он не только для чтения (т.е. Измените границу-цвет на черный), но если вы не измените CSS для всех входных тегов, вам будет трудно сохранить соответствие браузеры.

Чтобы получить arround, я просто добавляю кнопку календаря для выбора даты. Просто немного измените код 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"
    });
});

Примечание: вам нужно найти подходящее изображение.

Ответ 8

@rene-pot правильно. Тем не менее, у вас будет недопустимый знак на настольной версии веб-сайта. В этом случае примените readonly = "true" к div, который будет отображаться только в мобильном режиме, а не на рабочем столе. Смотрите, что мы здесь сделали http://www.naivashahotels.com/naivasha-hotels/lake-naivasha-country-club/