Как отключить клавиатуру iPhone для указанного поля ввода на веб-странице

Question

Я использую ввод месяца (как в jQuery UI datepicker) для поля срока действия кредитной карты.

Мне нужно отключить клавиатуру iPhone, потому что она скрывает средство выбора месяца.

Я попытался установить поле только для чтения, и это неприемлемое решение - в Safari iOS 5.1 поля только для чтения пропускаются при навигации по клавиатуре (кнопки «предыдущий / следующий» на клавиатуре). Размытие поля также недопустимо, поскольку оно запускает проверку (мы также используем проверку JQuery).

Есть ли способ отключить клавиатуру iPhone на одном поле, не устанавливая ее только для чтения или размывая ее?

Answer 1

Мне не приходилось прятаться от клавиатуры. Но вы подумали, альтернативный способ отображения «ввода». Одним из вариантов было бы использование <input type="month" />, которое приносит родной выбор месяца в iOS5.

Второй вариант будет стиль, например. элемент span в качестве элемента ввода (-webkit-Appearance не работает на iOS) и добавление tabindex для элемента Это также может сработать, хотя я не знаю, какой инструмент выбора месяца вы используете.

Третий вариант - нельзя ли предотвратить процесс проверки, когда размытие поля запускается вручную?

Answer 2

У меня была такая же проблема в Drupal, где поля ввода будут динамически добавляться, поэтому я добавил несколько js, проверил наличие Iphone / Ipad и добавил свойство «только для чтения»

var checkUserAgent = navigator.userAgent;
    if (checkUserAgent.match(/iPad/i) || checkUserAgent.match(/iPhone/i)) {
        var checkBabyId1 = $('#babys_due_date_id').length > 0;
        if (checkBabyId1 == true) {
            $('#babys_due_date_id').find('input').prop('readonly', true);
        }
    }