Лучший способ ограничить текстовое поле только числами?

Question

Я использую следующий Javascript, чтобы ограничить текстовое поле на моем сайте, чтобы принимать только числовой ввод, а не другие буквы или символы. Проблема в том, что он ДЕЙСТВИТЕЛЬНО отклоняет все другие ключевые вводы, такие как ctrl - A для выбора текста, или даже любые другие функции браузера, такие как ctrl - T или ctrl - W , когда выделено текстовое поле. Кто-нибудь знает лучший сценарий, позволяющий только вводить цифры, но не блокировать обычные команды (которые не вводятся напрямую в поле)? Спасибо Вот код, который я сейчас использую:

function numbersonly(e, decimal) 
{
    var key;
    var keychar;

    if (window.event) 
        key = window.event.keyCode;
    else if (e) 
        key = e.which;
    else 
        return true;

    keychar = String.fromCharCode(key);

    if ((key==null) || (key==0) || (key==8) ||  (key==9) || (key==13) || (key==27))
       return true;     
    else if ((("0123456789").indexOf(keychar) > -1))
       return true;
    else if (decimal && (keychar == "."))
       return true;        
    else
       return false;
}

Редактировать: Ни одно из представленных решений не решило мою проблему с разрешением таких команд, как ctrl - A , когда выделено текстовое поле. В этом весь смысл моего вопроса, поэтому я вернулся к использованию своего оригинального сценария. Ну хорошо.

Answer 1

более короткий путь и легко понять:

$('#someID').keypress(function(e) { 
    var k = e.which;
    if (k <= 48 || k >= 58) {e.preventDefault()};
});

Answer 2

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

document.getElementById('myinput').onkeydown = function(e)
 {
     console.log(e.key);
     //console.log(e.target.value);
     switch (e.key)
     {
         case "1":
         case "2":
         case "3":
         case "4":
         case "5":
         case "6":
         case "7":
         case "8":
         case "9":
         case "0":
         case "Backspace":
             return true;
             break;

         case ".":
             if (e.target.value.indexOf(".") == -1)
             {
                 return true;
             }
             else
             {
                 return false;
             }
             break;

         default:
             return false;
     }

 }

<input type="text" placeholder="Enter Value" id="myinput" />

Answer 3

Это вариант ответа Роберта, который позволяет ввести одну десятичную точку. Если десятичная точка уже введена, в качестве входных данных принимаются только цифры.

JSFiddle - ввод десятичного числа

// Allow only decimal number input

$('#decimalInput').keypress(function (e) {
    var a = [];
    var k = e.which;

    for (i = 48; i < 58; i++)
    a.push(i);

    // allow a max of 1 decimal point to be entered
    if (this.value.indexOf(".") === -1) {
        a.push(46);
    }

    if (!(a.indexOf(k) >= 0)) e.preventDefault();

    $('span').text('KeyCode: ' + k);
});

Answer 4

это также позволит вводить данные на цифровой клавиатуре.

.keydown(function(event){                                     
    if(event.keyCode == 8 || event.keyCode == 46)             
        return true;                                         
    if(event.keyCode >= 96 && event.keyCode <= 105)           
        return true;                                          
    if(isNaN(parseInt(String.fromCharCode(event.keyCode),10)))
       return false;                                          
}); 

Answer 5

Вот мое решение: комбинация рабочих ниже.

var checkInput = function(e) {
        if (!e) {
            e = window.event;
        }

        var code = e.keyCode || e.which;

        if (!e.ctrlKey) {

            //46, 8, 9, 27, 13 = backspace, delete, tab, escape, and enter
            if (code == 8 || code == 13 || code == 9 || code == 27 || code == 46)
                return true;
            //35..39 - home, end, left, right
            if (code >= 35 && code <= 39)
                return true;
            //numpad numbers
            if (code >= 96 && code <= 105)
                return true;
            //keyboard numbers
            if (isNaN(parseInt(String.fromCharCode(code), 10))) {
                e.preventDefault();
                return false;
            }
        }
        return true;
    };

Answer 6

Все ответы устарели, длинны и вызовет раздражения у ваших пользователей. Большинство из них даже не фильтруют и не разрешают вставлять контент.

Вместо фильтрации входных данных выполните некоторую проверку перед отправкой формы, а затем и на стороне сервера.

В HTML включена проверка:

<input type="number" pattern="[0-9]+">

Готово. Это также включает цифровую клавиатуру на мобильном телефоне.

Answer 7

Я сталкивался с вашим вопросом, пытаясь понять это сам.Вот решение, которое я придумала.

// Prevent user from entering non-numeric characters in number boxes.
(function (inputs) {
    var input;
    var f = function (e) {
        var unicodeRe = /U\+(\d+)/;
        // Chrome doesn't support the standard key property, so use keyIdentifier instead.
        // Instead of the actual character that "key" returns, keyIdentifier returns
        // A string such as "U+004F" representing the unicode character.

        // For special characters (e.g., "Shift", a string containing the name of the key is returned.)
        var ch = e.key || e.keyIdentifier;
        var match = ch.match(unicodeRe);
        // keyIdentifier returns a unicode. Convert to string.
        if (match) {
            ch = String.fromCharCode(Number.parseInt(match[1], 16));
        }
        console.log(ch);
        if (ch.length === 1 && /[^0-9]/.test(ch)) {
            if (!/[\b]/.test(ch)) { // Don't prevent backspace.
                e.preventDefault();
            }
        }
    };
    for (var i = 0, l = inputs.length; i < l; i += 1) {
        input = inputs[i];
        input.onkeydown = f;
    }
}(document.querySelectorAll("input[type=number],#routeFilterBox")));

Редактировать: я обнаружил, что мое решение не позволяет пользователю вводить числа с помощью цифровой клавиатуры в Chrome.Клавиши клавиатуры 0-9, кажется, возвращают символ "` "для 0 и AI для остальных цифровых клавиш.

Answer 8

Чтобы заблокировать ввод любых значений, кроме чисел, в текстовое поле, но при этом разрешить работу других кнопок (таких как удаление, смещение, вкладка и т. Д.), Посмотрите ссылку кодов клавиш Javascript ; все от 65 до (до 222) может быть заблокировано.

Используя Jquery и Javascript, это выглядело бы как:

$('#textFieldId').keydown(function(event) {
    if ( event.keyCode > 64 ) {
        event.preventDefault();
    }
});

Коды клавиш будут одинаковыми в Javascript, независимо от того, используется Jquery или нет.

Answer 9

Стоит отметить, что независимо от того, насколько плотно вам удается управлять этим через интерфейс (Javascript, HTML и т. Д.), Вам все равно нужно проверить его на сервере, потому что ничто не мешает пользователю отключить JavaScript или даже намеренно разместив нежелательную информацию в вашей форме, чтобы попытаться взломать вас.

Мой совет: используйте разметку HTML5, чтобы браузеры, поддерживающие ее, использовали ее. Также используйте предложенную ранее опцию JQuery (первоначальное решение может иметь недостатки, но кажется, что комментарии работали над этим). А затем выполните проверку на стороне сервера.

Answer 10

Это мой плагин для этого случая:

 (function( $ ) {
    $.fn.numbers = function(options) {
      $(this).keypress(function(evt){
          var setting = $.extend( {
                'digits' : 8
              }, options);
          if($(this).val().length > (setting.digits - 1) && evt.which != 8){
              evt.preventDefault(); 
          }
          else{
              if(evt.which < 48 || evt.which > 57){
                if(evt.keyCode != 8){
                    evt.preventDefault();  
                }
              }
          }
      });
    };
  })( jQuery );

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

 $('#limin').numbers({digits:3});
 $('#limax').numbers();