Отключить настройку фокуса для выбора даты в jQuery UI - PullRequest
Новая
       21

Отключить настройку фокуса для выбора даты в jQuery UI

20 голосов
/ 02 августа 2011

С помощью указателя даты jQuery UI можно открывать указатель даты только при нажатии на изображение кнопки. Смотрите следующий пример:

http://jqueryui.com/demos/datepicker/#icon-trigger

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

При использовании страницы, подобной приведенной выше, на мобильном устройстве, таком как iPhone, клавиатура всплывает, потому что текстовое поле получает фокус. Это не очень удобно для пользователя, поскольку вам нужно закрыть клавиатуру, чтобы на самом деле добраться до средства выбора даты и использовать его ...

Ответы [ 10 ]

46 голосов
/ 30 июня 2013

установить вход ReadOnly 

<input type="text" id="datePicker" readonly>
2 голосов
/ 29 мая 2013

Если вы отключите ввод, клавиатура никогда не появится. Как ... 

    <input type="text" id="date_picker_field" name="date" disabled/>
1 голос
/ 19 ноября 2015

Достигнут желаемого результата, установив опцию dateOicker showOn в значение «none». 

$(#startdate").datepicker({
    defaultDate : "+7d",
    minDate: "+7d",
    changeMonth : true,
    changeYear : true,
    yearRange : "c:c+1",
    numberOfMonths : 1,
    showOn: "none",
    dateFormat : "dd-MM-yy",
    onClose : function(selectedDate) {
        $("#startdate").val(selectedDate);
        $( "#enddate" ).datepicker( "option", "minDate", selectedDate );
    }
});

Реализация datepicker понимает значения "focus", "button" и "both" для опции showOn. По умолчанию установлено «фокус». Так что технически передача любого значения, кроме этих 3, должна работать. Тем не менее, предостережение: после переопределения функциональности по умолчанию ответственность за правильное отображение календаря выбора даты возлагается на вас.

1 голос
/ 21 мая 2015

У меня была минимизированная версия v1.11.4, и в jquery-ui.min.js я нашел два раза

datepicker._shouldFocusInput(t)&&t.input.focus()

Я удалил &&t.input.focus(), и он отлично работает.1007 *

Также может представлять интерес: 

_shouldFocusInput:function(e){
  return e.input&&e.input.is(":visible")&&!e.input.is(":disabled")&&!e.input.is(":focus")
}

Все еще ищите исправления без изменения основных файлов ...

1 голос
/ 27 ноября 2013

У меня возникла та же проблема с приложением, над которым я работаю.Я закомментировал эти строки из моего файла jQuery, чтобы он не устанавливал фокусировку на текстовом поле сразу после нажатия на значок календаря.Это сработало для моего приложения. 

if ( $.datepicker._shouldFocusInput( inst ) ) {
    inst.input.focus();
}
1 голос
/ 07 сентября 2011

Если вы используете jQuery Mobile- , то, возможно, вы захотите проверить некоторые мобильные ориентированные сборщики дат. Я использую экспериментальный jQueryUI mobile datepicker (из альфа-4) после того, как опробовал несколько других, потому что нам нужно было хорошее представление календаря. Он просто добавляет несколько классов CSS, добавленных поверх существующего средства выбора даты. Я использую версию Edited , поэтому она работает как всплывающее окно. Чтобы не открывать клавиатуру, я просто добавляю событие размытия jQuery $this.blur() сразу после того, как оно получает фокус перед тем, как отобразится окно выбора. Событие размытия происходит достаточно быстро, чтобы клавиатура никогда не открывалась.

Если нет - Вы, вероятно, захотите сделать то же самое. Я не знаю, как это сделать без редактирования кода.

0 голосов
/ 03 апреля 2019

Это старый вопрос, но если вы наткнетесь на него, ища решение той же проблемы, я считаю решение в современных браузерах заключается в использовании inputmode="none" в теге ввода HTML: 

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

Я не тестировал его всесторонне, но он хорошо работал в Android с настройками, которые я использовал.

0 голосов
/ 16 сентября 2017 
$('#dateIniPick').datetimepicker({
    format: 'DD/MM/YYYY',
    ignoreReadonly: true,
    allowInputToggle: true
});
0 голосов
/ 22 сентября 2015

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

$selected = $("#datepickerInput");
$selected.prop('disabled', true);
$selected.datepicker("show");
window.setTimeout(function () {
   $selected.prop('disabled', false);
}, 100);

Протестировано на Chrome, а также с cordova на Android 5.1.1.

0 голосов
/ 18 сентября 2013

Я испытал то же самое, когда клавиатура / клавиатура выскакивает, прежде чем я могу выбрать дату во время тестирования на мобильных устройствах.Я только что добавил атрибут readonly = "true" внутри

Однако, не забудьте отредактировать CSS и указать курсор: указатель, потому что он показывает знак вопроса каждый раз, когда вы наводите курсор мыши в представлении рабочего стола.

...