Клавиша Force Number на ipad для контент-контента

Я использую contenteditable в нескольких разделах нашего приложения. Естественно, я хочу, чтобы клавиатура автоматически переключалась на клавиатуру с цифрами для пользователей ipad. Я попытался добавить все атрибуты к элементам, о которых я могу думать, например:

  • Тип = число
  • Type = тела
  • паттерн = [0-9] *

но ipad по-прежнему загружает клавиатуру по умолчанию.

Вот пример:

<div class="editable validate numbers-only" contenteditable="true" type="number" pattern="[0-9]*">3</div>

Есть ли какие-либо трюки, которые я могу использовать для отображения цифровой клавиатуры для моих пользователей ipad?

Ответы

Ответ 1

это меня просто взяло:) Я нашел это: Iphone Development - Как отобразить числовую клавиатуру?

не уверен, что вы с ним где-нибудь сходите, но он изменил раскладку клавиатуры, когда я ввел

onKeypress="if(event.keyCode < 48 || event.keyCode > 57){return false;}"

может немного поиграть. У меня нет времени проверять:) (И еще не могу прокомментировать). приветствия

Ответ 2

Я прочитал в этом посте, что вы можете использовать шаблон \d *, чтобы цифровая клавиатура появилась на iOS, поэтому базовая форма с цифровой клавиатурой будет выглядеть следующим образом:

<form>
    <input type="text" pattern="\d*">
    <button type="submit">Submit</button>
</form>

что должно привести к тому, что цифровая клавиатура автоматически появится на iOS при вводе информации формы.

Теперь я уверен, что мы могли бы экстраполировать это и сказать, что мы могли бы использовать \d * в contenteditable div, чтобы ответить на вопрос:

<div class="editable validate numbers-only" contenteditable="true" type="text" pattern="\d*">3</div>

Я надеюсь, что это работает для вас?

Ответ 3

Я не уверен, как вы используете клавиатуру здесь? Значит, пользователь добавляет/обновляет время или что-то? Если они это сделают, сделайте тип ввода для числа. Это сообщит браузеру (сафари), что это ввод только для цифр, и iOS скажет автоматически отображать цифровую клавиатуру.

<input type="number">

Оформить заказ на мой веселый проект под названием "Калькулятор веса". Проверьте, как это предотвратит любые другие клавиши внутри ввода, а также покажет цифровую клавиатуру в мобильном устройстве. Калькулятор веса

Ответ 4

<form>
    <input type="text" pattern="\d*">
    <button type="submit">Submit</button>
</form>

затем

<div class="editable validate numbers-only" contenteditable="true" type="text" pattern="\d*">3</div>