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

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

35 голосов
/ 22 августа 2010

У меня есть форма с полем даты, к которому прикреплен jquery datepicker.

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

Как предотвратить появление клавиатуры в этой ситуации?

Ответы [ 11 ]

29 голосов
/ 19 ноября 2010

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

$(".datePicker").datepicker({
    showOn: 'button',
    onClose: function(dateText, inst) 
    { 
        $(this).attr("disabled", false);
    },
    beforeShow: function(input, inst) 
    {
        $(this).attr("disabled", true);
    }
});
24 голосов
/ 29 июля 2011

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

Подробнее о readonly .

11 голосов
/ 06 февраля 2014

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

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

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

4 голосов
/ 30 июля 2015

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

Решение состоит в том, чтобы использовать атрибут «readonly» для элемента и добавить «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>
4 голосов
/ 14 декабря 2010

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

$(".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, или использовать средство выбора даты, нажав кнопку даты.

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

1 голос
/ 18 сентября 2010

Не нашел способа сделать это, но в итоге я использовал приемлемый обходной путь использования функции 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,
     ...
0 голосов
/ 03 апреля 2019

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

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

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

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

0 голосов
/ 23 октября 2017

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

<script type="text/javascript">

jQuery (document) .ready (function () {

var ybdDatePick = jQuery( ".hasDatepicker" );

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

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

          }
        );

});
});

0 голосов
/ 07 ноября 2016

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

Идея состоит в том, чтобы отключить события мыши (pointer-events: 'none') для элемента input, чтобы клавиатура не появлялась, а затем добавить событие onclick для родительского элемента div, который охватывает input элемент. Событие onclick должно открыть окно выбора даты.

Пример кода

Здесь показано, как устранить проблему при использовании datetimepicker XDSoft .

Решение предполагает, что элемент input обернут внутри элемента div. 

(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.$);
0 голосов
/ 31 января 2015

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

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

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

cheers

Обновление

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

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

Получить значение из текстового поля asp: с помощью 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..}

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

Update 2

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

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

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

bool IsMobile = Page.Request.Browser.IsMobileDevice;

и 

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

cheers

Trev.

Страница:
...