HTML 5 Input type='date' отключить ввод с клавиатуры

Question

Я работаю над Chrome Packaged App, поэтому мой код должен работать только в Chrome.

У меня есть следующий вход

<input type="date" />

https://jsfiddle.net/jhbo4q2k/

В Chrome это автоматически добавляет DatePicker. Я хотел бы только сохранить этот Datepicker и отключить ввод с клавиатуры.

Это возможно?

РЕДАКТИРОВАТЬ:

Принятый ответ работает. Просто будь осторожен с этим

https://developer.chrome.com/extensions/tut_migration_to_manifest_v2

Вы не можете использовать встроенные скрипты в упакованном приложении.

Answer 1

Ты можешь использовать onkeydown и запретить пользователю вводить значение.

<input type="date" onkeydown="return false" />

Answer 2

Для ReactJS вышеуказанные решения не работают

Я должен был сделать:

<input type="date" onKeyDown={(e) => e.preventDefault()} .... />

Answer 3

Привет, вы можете предотвратить всплывающее окно клавиатуры с помощью onfocus="blur()". Поскольку, когда элемент имеет фокус, мы удалим его (нативная клавиатура не будет отображаться), однако с помощью щелчка мы можем продолжить нашу работу.

 <input type="date" class="form-control"  onfocus="blur()" onclick="dosomework()" name="some-name" id="some-id" >
<script>

function dosomework(){
 alert('hi');
 }

<script>

Answer 4

Простой способ включить и отключить дату ввода:

Шаг 1: создайте дату ввода.

Надеюсь, это может тебе помочь.

Answer 5

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

          <Controller
                    onKeyDown={(e) => e.preventDefault()}
                    name="date"
                    control={control}
                    render={({ field, value }) => (
                        <Form.Control
                            value={value}
                            {...field}
                            onKeyDown={(e) => e.preventDefault()}
                            type="date"
                            id="date"
                            className="formcontrol"
                            placeholder="Pick the date"
                            
                        />
                    )}
                />

Answer 6

e.preventDefault() выполнит эту работу...

Answer 7

Использование jQuery:

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

       $('[name="date"]').attr('inputmode', 'none');
 $('[name="date"]').on('keydown', (e) => {
    e.preventDefault();
    return false;
 });

Использование Vanilla js:

      document.querySelector('[name="date"]').setAttribute('inputmode', 'none');
document.querySelector('[name="date"]').addEventListener('keydown', (e) => {
    e.preventDefault();
    return false;
});

Answer 8

При использовании форм django;

      datetime = forms.DateTimeField(widget=forms.DateTimeInput(attrs={
            'onkeydown': 'return false' # If you want to disable the keyboard
            "onfocus": 'blur()' # If you also want to disable virtual keyboard(on smartphones).
        }))

ИЛИ ЖЕ

      document.getElementById('id_datetime').onkeydown = (e) => {
    e.preventDefault();
}
document.getElementById('id_datetime').setAttribute('onfocus', 'blur()');

Django просто добавляет id перед именем поля ввода и устанавливает его в качестве своего идентификатора. Здесь имя поля ввода datetime, поэтому идентификатор будет id_datetime.

Answer 9

Отключение ввода с клавиатуры - отличный способ сделать ваше приложение менее доступным для людей с ограниченными возможностями и сделать его менее удобным для пользователя в целом. На мой взгляд, ввод с клавиатуры намного проще использовать, чем средства выбора даты, особенно если ожидаемый формат ясен. Вам было бы лучше выполнить некоторую базовую проверку поля, чтобы убедиться, что ввод является разумным, прежде чем отправлять его, поле даты HTML уже имеет строгую проверку по умолчанию в Chrome Firefox и Edge.