Веб-приложение ipad: как предотвратить появление клавиатуры на jquery datepicker

Я использовал слегка модифицированную версию решения Роба Осборна, и оно успешно предотвратило всплывающую клавиатуру на iPad и iPhone.

$(".datePicker").datepicker({
    showOn: 'button',
    onClose: function(dateText, inst) 
    { 
        $(this).attr("disabled", false);
    },
    beforeShow: function(input, inst) 
    {
        $(this).attr("disabled", true);
    }
});

Вместо того, чтобы отключать ввод, дайте ему свойство «только для чтения». Это лучше, чем отключить его, потому что вы можете сохранить форму, не изменяя ее.

Вот дополнительная информация о режиме только для чтения.

Вот как мне удалось справиться с этой проблемой, заставив браузер думать, что пользователь размыл ввод, поэтому он скрывает клавиатуру, прежде чем она успеет показать:

$('blabla')
    .datepicker(
    {
        /* options */
    })
    .on('focus',function()
    {
        $(this).trigger('blur');
    });

Хорошо работает для меня, где многие другие решения, которые я нашел, не работали!

Я использовал комбинацию ответов CDeutsch и Роба, чтобы отключить поле ввода, когда пользователь щелкает календарь, а затем включить поле после закрытия средства выбора даты следующим образом:

$(".date").datepicker({
    showOn: "button",
    onClose: function(dateText, inst) { $(this).attr("disabled", false); },
    beforeShow: function(dateText, inst) { $(this).attr("disabled", true); },
    buttonImage: "/images/calendar.png",
    buttonImageOnly: true
});

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

Еще раз спасибо за отличный вклад в эту проблему, я застрял в этой же проблеме, пока не прочитал вышеприведенные сообщения.

Если вы используете выбор даты и времени, параметр "beforeShow" недоступен. Только добавление атрибута «только для чтения» к входному полю полностью отключит средство выбора даты.

Решение состоит в том, чтобы использовать атрибут «только для чтения» для элемента и добавить «ignoreReadonly: true» в качестве опции для средства выбора даты.

$(function() {
     $('#datetimepicker1').datetimepicker({
	format: 'MM-DD-YYYY',
	minDate: moment(),
	ignoreReadonly: true
     });
});

<div class='input-group date' id='datetimepicker1'>
  <input type='text' id="date" readonly style="cursor: default; background-color: #fff" class="form-control" />
  <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>

Не нашел способ сделать это, но в итоге я использовал приемлемую работу с использованием функции buttonImage с buttonImageOnly, а затем отключил поле даты.

$("#id_date").datepicker({
        dateFormat: 'yy/mm/dd',
        showOn:"button",
        buttonImage: "/icons/calendar.gif",
        buttonImageOnly: true });
$('#id_date').attr("disabled", true);

Если вы делаете это в форме, убедитесь, что вы снова активировали поле перед отправкой или сериализацией формы, иначе значение не будет отправлено (по крайней мере, на iPad). Я делаю следующее в своей функции отправки:

$('#id_date').attr("disabled", false);
var dataString = $('#the_form').serialize();
$.ajax({
     type: "POST",
     url: 'myurl',
     data: dataString,
     ...

Прошло уже три часа, а результата нет. У меня нет Iphone, поэтому я пробую вышеописанное на телефоне Android с версией 2.3.

На моем телефоне я все еще получаю клавиатуру каждый раз, ничто не останавливает ее, и я не могу использовать «только для чтения», поскольку она останавливает мой код asp.net4/C# после запуска, что немного cr#p, но это так.

Итак, мой первоначальный вопрос: работают ли эти идеи только на Iphone?

ваше здоровье

Обновлять

Я нашел способ заставить приведенные выше ответы работать для ASP.Net 4. поэтому решил поделиться.

Кажется, что ‹ asp:TextBox ID=something ...› не запускает Javascript или JQuery, поскольку ему назначен «специальный» идентификатор, такой как ctl00_content..... на стороне сервера, который не совпадает с #something в код JQuery. Но благодаря пробам и ошибкам, используя эту публикацию: -

Получить значение из asp:textbox с помощью JQuery

Я понял, что использование следующего (благодаря приведенному выше плакату) размоет фокус и перестанет показывать клавиатуру на мобильных телефонах (по крайней мере, мой Android :)

$("#<%=sDatepicker.ClientID%>").focus(function () {
        $(this).blur();
    });

поэтому следующий простой пример кода, используемый с JQuery выше, надеюсь, поможет другим:

<asp:TextBox ID="sDatepicker" OnTextChanged="sDatepicker_changed" AutoPostBack="True" ReadOnly="False"></asp:TextBox>

Конечно, «sDatepicker_changed» — это ваш код за кодом.

 protected void sDatepicker_changed(object sender, EventArgs e)
{//do stuff here..}

Я также могу запустить всплывающее окно datepicker и использовать мою функцию кода для заполнения другого текстового поля с датой окончания через 7 дней от этого.

Обновление 2

Казалось бы, это работает только в мобильных телефонах! в браузере он выдает ссылку на объект, не установленную на экземпляр объекта, потому что asp.net решил, что TextBox не существует после обратной передачи, но запускает JavaScript. Отклоняюсь от темы, так что больше ничего не скажу.

Обновление 3 - Мой ответ

Теперь все отсортировано :), окружил мой <script>..</script> <Div> и сделал его видимым только в том случае, если нужно запустить код JavaScript, когда я обнаружил, что это мобильное устройство, с помощью:

bool IsMobile = Page.Request.Browser.IsMobileDevice;

и

if (IsMobile == true)
{                
    mobileScript.Visible = true;
}

ваше здоровье

Трев.

Я считаю, что это решение может работать для всех различных средств выбора даты и времени, но я тестировал его только с средством выбора даты от XDSoft. .

(function($){
    var originalDateTimePicker = $.fn.datetimepicker;
    $.fn.datetimepicker = function(args){
        this.each(function(i, dateTimePicker){
            dateTimePicker = $(dateTimePicker);
            dateTimePicker.closest('div').on('click', function(e){ 
                dateTimePicker.trigger('open');
            });
            dateTimePicker.css({ 'pointer-events': 'none' });
        });
        return originalDateTimePicker.apply(this, arguments);
    };
})(window.jQuery||window.$);

Я использовал этот код, и он отлично работает... Класс ".hasDatepicker" предназначен для моего ввода, который содержит средство выбора даты

<script type="text/javascript">

jQuery (документ). готов (функция () {

var ybdDatePick = jQuery( ".hasDatepicker" );

    jQuery(function() {
       ybdDatePick.datepicker({ }).attr('readonly','readonly');

       ybdDatePick.on('focus',function() {
            jQuery(this).trigger('blur');
             this.datepicker({ }).attr('readonly','readonly');

          }
        );

});
});

Я считаю, что лучший способ сделать это в современных браузерах — использовать inputmode="none". Вот HTML-код:

<input type="text" ... inputmode="none" />

По крайней мере, в Android Chrome это позволяет моему средству выбора даты (очевидно, отдельно инициализированному через jQuery) появляться на моем телефоне, а виртуальная клавиатура не появляется.

Это предотвращает проблемы, которые возможны при создании поля только для чтения (невозможность очистить значение и т. д.).

Используя последнюю версию DatePicker, это можно сделать так:

//for tablets / phones
    $('#yourElement').datepicker().on('show', function (e) {
        $(this).trigger('blur');
    })

Обратите внимание, однако, что клавиатура может мигать внизу экрана в течение секунды, пока не будет активирована функция blur().