Home / Questions / 188643
Accepted
Popularfan
Asked: 2020-08-15 00:27:21 +0800 CST 2020-08-15 00:27:21 +0800 CST

Разрешить ввод только цифр в текстовое поле с javascript для мобильных устройств

  • 772

У меня есть функция заполнения формы в JavaScript, которая позволяет мне просто вводить числа в текстовое поле.

Проблема в том, что он работает только на компьютерах, а не на мобильных устройствах.

function validarNumero(e) {
    tecla = (document.all) ? e.keyCode : e.which;
    if (tecla==8) return true; 
    patron =/[0-9]/;
    te = String.fromCharCode(tecla); 
    return patron.test(te); 
 }

И в части кода HTML

<input type="text" id="txtNumero" maxlength="10" onkeypress="return validarNumero(event)">
javascript

3 Answers

  1. Best Answer

    Если вы не можете использовать HTML5 и CSS3 , то, возможно, наиболее переносимым является захват событий keyupи changeудаление чисел из поля формы следующим образом:

    function limpiarNumero(obj) {
  /* El evento "change" sólo saltará si son diferentes */
  obj.value = obj.value.replace(/\D/g, '');
}
    <input type="text" id="txtNumero"
  maxlength="10"
  onkeyup="limpiarNumero(this)"
  onchange="limpiarNumero(this)"
/>

    Причина в сложности нажатий клавиш, которые вы должны фильтровать, чтобы поддерживать совместимость со всем (мобильные устройства, копирование/вставка, наведение курсора, выделение части текста и т. д.).

    Более подробную информацию о кодах клавиатуры вы можете найти в документации .

    Лично я бы оставил гибридную версию, которая могла бы использовать возможности HTML5, если они присутствуют.

    Я сохраняю версию HTML5 + CSS3 в истории изменений.

    • 4

  2. Вы должны использовать numberтип ввода, если вам не нужно поддерживать устройства старше тех, которые перечислены в таблице caniuse .

    <input type="number" />

    ОБНОВИТЬ

    Поскольку вы не можете использовать HTML5, вы можете попробовать эту функцию:

    function validarNumero(e){
    var charCode = (e.which) ? e.which : e.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57)){
        return false;
    }
    return true;
}
    • 2

  3. Я предлагаю 2 решения.

    Использовать:

    <input type="number">

    При этом вы получаете цифровую клавиатуру, чтобы появиться на мобильном телефоне. В этом есть плюсы и минусы.

    С одной стороны, вы сохраняете проверки и у вас есть более защищенный ввод данных. С другой стороны, вы не можете поставить ноль перед «0898», например, это уберет 0. Это проблема, если это почтовые индексы, номера телефонов и т. д.

    Другое решение заключается в использовании:

    <input pattern="[0-9]{7,15}">

    Это проверка HTML5 и работает так же, как и required , minlength , maxlength и т. д.

    Приведенный выше пример подтверждает, что это строка от 7 до 15 цифр, где могут быть только символы от 0 до 9 (для меня это очень хорошо работает для первой проверки телефона)

    Это всего лишь пример, вы можете использовать любое регулярное выражение, которое вам подходит.

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

    • 1