Как запретить вывод экранной клавиатуры для текстового поля на мобильных устройствах?

Question

[unclechu]

Ситуация такая, текстовое поле в форме используется для ввода даты с помощью jQuery UI Datepicker, но суть в том, что когда поле попадает в фокус и показывается Datepicker, — для поля показывается экранная клавиатура. К тому же форма выводится блоком со свойством position: fixed; и центрируется. После появления экранной клавиатуры, — Datepicker остаётся на прежнем месте, а т.к. форма центрируется, то Datepicker уже смещён относительного поля и по большей части скрывается под экранной клавиатурой. Каким будет наиболее оптимальным способом избежать показа экранной клавиатуры? Спасибо.

Answer 1

[Сергей Мельников]

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

<input type="date">
<input type="datetime">

Comments

[unclechu]

Это решило проблему! Спасибо!
Сделал проверку через Modernizr: if (!Modernizr.inputtypes.date) и только в этом случае подключаю datepicker.

Answer 2

[Дмитрий Деменков]

на поле input добавить аттрибут readonly и изменить тип курсора при наведении на это поле (по умолчанию поля readonly курсор выглядит недоступным) на курсор типа указателя pointer
вот так у меня выглядит?

<input autocomplete="off" id="start" value="{{ begin|date('d.m.Y') }}" class="form-control" name="start" type="text" readonly style="cursor: pointer;" />

Тогда вызывается стандартный обработчик datapicker, а на мобилке клавиатура не вылазит.

Comments

[Rinat Sadykov]

ну тогда он и не дает выбрать дату.

[Дмитрий Деменков]

Ruinevo: при нажатии на это поле вызывайте datapicker и все прекрасно будет работать.

[Rinat Sadykov]

странно, datapicker вызывается, но в нем выбор даты не активен.

[Дмитрий Деменков]

Ruinevo: может быть datapicker не настроен?
Можете посмотреть тут ссылка как это реализовано

[Rinat Sadykov]

Дмитрий Деменков: спасибо

Answer 3

[Радость моя]

замените текстовое поле на div а событие вызова datepicker повесьте на клик по нему. Иначе никак.

Comments

[Jentoss]

Спасибо

[Радость моя]

пожалуйста :)

Answer 4

[jssputty]

Странно, вот на этом сайте (ссылка просто пример) datepicker стандартно висит на поле input с значением type="text", но на мобильных устройствах экранную клавиатуру не выводит. Как это реализовано?

Comments

[unclechu]

Возможно в скриптах идёт проверка на поддержку типа поля "date", и если таковая есть, — type меняется и datepicker не инициализируется.

[levyn]

Атрибут readonly

Answer 5

[Rinat Sadykov]

Кто нибудь нашел решение проблемы? помимо использования стандартных input type date?

Comments

[Antonio Solo]

смотри ответ чуть выше - Дмитрий Деменков Ответ написан 09 февр. 2017

[Иван Иващенко]

Самый простой способ убрать фокус из input. Он там вообще не нужен, если Вы используете свой календарь.

Answer 6

[ivan_gerasimovich]

Дописать в input onfocus="blur();"