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

Question

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

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

но вход по-прежнему «запускает» клавиатуру iphone

ps: я хочу сделать это, потому что я использую плагин datepicker для даты

Answer 1

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

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

Answer 2

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

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

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

Answer 3

Я задал подобный вопрос здесь и получил фантастический ответ - используйте встроенный 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();

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

Answer 4

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

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

Answer 5

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

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


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

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

Answer 6

Лучший способ решить эту проблему, по моему мнению, это использовать "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
        });
});

Answer 7

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

Answer 8

Итак, вот мое решение (аналогично ответу Джона Вэнса):

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

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

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

Поле для non-mobile должно быть доступно только для чтения, потому что, если мобильный браузер, такой как 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"
    });
});

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