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

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

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, когда выбрано текстовое поле. В этом весь смысл моего запроса здесь, поэтому я вернулся к использованию моего оригинального script. О, хорошо.

Ответ 1

Это то, что я сделал еще раз для простых чисел, он также позволит всем форматам.

JQuery

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

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

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

Попробуйте

http://jsfiddle.net/zpg8k/

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

Изменить для разработки нескольких методов

Я вижу, что вы подпрыгиваете вокруг "принятого" ответа, поэтому я что-то проясню. Вы действительно можете использовать любой из перечисленных здесь методов, все они работают. То, что я лично сделал, - это использование my для фильтрации на стороне клиента, а затем на стороне отправки и на стороне сервера используйте RegEx, как это было предложено другими. Однако никакая клиентская сторона сама по себе не будет эффективна на 100%, так как нет ничего, что помешает мне помещать document.getElementById('theInput').value = 'Hey, letters.'; в консоли и в обход любой проверки клиентов (кроме опроса, но я мог бы просто отменить setInterval с консоли). Используйте какое-либо решение на стороне клиента, которое вам нравится, но обязательно выполняйте что-либо на стороне отправки и на стороне сервера.

Редактировать 2 - @Tim Down

Хорошо, в комментариях мне пришлось приспособить две вещи, о которых я не думал. Во-первых, keypress вместо keydown, который был обновлен, но отсутствие indexOf в IE (серьезно Microsoft!?) также нарушает приведенный выше пример. Здесь альтернатива

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

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

    if (!($.inArray(k,a)>=0))
        e.preventDefault();
});

Новый jsfiddle: http://jsfiddle.net/umNuB/

Ответ 2

     .keypress(function(e)
               {
                 var key_codes = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 0, 8];

                 if (!($.inArray(e.which, key_codes) >= 0)) {
                   e.preventDefault();
                 }
               });

Вам также нужны клавиши Backspace и Delete;)

Ответ 3

Это работает в IE, Chrome и Firefox:

<input type="text" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));" />

Ответ 4

http://jsfiddle.net/PgHFp/

<html>
<head>
<title>Test</title>
<script language="javascript">
function checkInput(ob) {
  var invalidChars = /[^0-9]/gi
  if(invalidChars.test(ob.value)) {
            ob.value = ob.value.replace(invalidChars,"");
      }
}
</script>
</head>

<body>
    <input type="text" onkeyup="checkInput(this)"/>
</body>
</html>

Ответ 5

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

var numInput;
window.onload = function () {   
    numInput = document.getElementById('numonly');
    numInput.onkeydown = numInput.onblur = numInput.onkeyup = function()
    {
        numInput.value = numInput.value.replace(/[^0-9]+/,"");
    }
}

Ответ 6

Единственное событие, которое содержит информацию о введенном символе, - keypress. Все, что связано с символами, вы можете заключить из свойства keyCode событий keydown или keyup ненадежны и зависят от конкретного сопоставления клавиатуры. Следующее приведет к тому, что нечисловая клавиатура вводит все основные браузеры, используя символ, полученный из события keypress. Это не помешает пользователю вставить или перетащить нечисловой текст.

var input = document.getElementById("your_input");

input.onkeypress = function(evt) {
    evt = evt || window.event;
    if (!evt.ctrlKey && !evt.metaKey && !evt.altKey) {
        var charCode = (typeof evt.which == "undefined") ? evt.keyCode : evt.which;
        if (charCode && !/\d/.test(String.fromCharCode(charCode))) {
            return false;
        }
    }
};

Ответ 7

Возможно, вы используете бутстрап. Если это так, этого может быть достаточно:

<input type="text" data-mask="9999999">

Маска ввода

Ответ 8

Я использую это:

    oEl.keypress(function(ev)
    {
        var sKey = String.fromCharCode(ev.which);
        if (!sKey.match(/[0-9]/) || !sKey === "") 
            ev.preventDefault();            
    });

Преимущество состоит в том, что каждый ключ, который не предоставляет вход в поле, по-прежнему разрешен, поэтому вам не нужно беспокоиться о каждом отдельном ключе. Даже комбо, такие как CTRL + R, все еще работают.

ИЗМЕНИТЬ Поскольку это не работает в Firefox, мне пришлось немного изменить функцию:

    oEl.keypress(function(ev)
    {
        var iKeyCode = ev.which || ev.keyCode;
        var aSpecialKeysForFirefox = [8, 9, 13, 27, 37, 38, 39, 40, 46];
        var sKey = String.fromCharCode(iKeyCode);
        if (sKey !== "" && $.inArray(iKeyCode, aSpecialKeysForFirefox ) < 0 && !sKey.match(/[0-9]/)) {
            ev.preventDefault();
        }
    });

Объяснение Все браузеры обрабатывают событие jquerys по-разному. Чтобы заставить его работать в FF, добавляется проверка $.inArray. Поскольку event-событие firefoxs не запускается, когда используются комбинации, такие как strg + tab, но другие делают, подход key.match все еще добавляет небольшое значение последнему, поскольку он позволяет использовать эти комбинации.

Ответ 9

Следующий код - это то, что я широко использую. Я нашел script на форуме, но изменил и расширил его, чтобы удовлетворить мои потребности:

<script type="text/javascript">
    // Restrict user input in a text field
    // create as many regular expressions here as you need:
    var digitsOnly = /[1234567890]/g;
    var integerOnly = /[0-9\.]/g;
    var alphaOnly = /[A-Za-z]/g;
    var usernameOnly = /[0-9A-Za-z\._-]/g;

    function restrictInput(myfield, e, restrictionType, checkdot){
        if (!e) var e = window.event
        if (e.keyCode) code = e.keyCode;
        else if (e.which) code = e.which;
        var character = String.fromCharCode(code);

        // if user pressed esc... remove focus from field...
        if (code==27) { this.blur(); return false; }

        // ignore if the user presses other keys
        // strange because code: 39 is the down key AND ' key...
        // and DEL also equals .
        if (!e.ctrlKey && code!=9 && code!=8 && code!=36 && code!=37 && code!=38 && (code!=39 || (code==39 && character=="'")) && code!=40) {
            if (character.match(restrictionType)) {
                if(checkdot == "checkdot"){
                    return !isNaN(myfield.value.toString() + character);
                } else {
                    return true;
                }
            } else {
                return false;
            }
        }
    }
</script>

Различные методы использования:

<!-- To accept only alphabets -->
<input type="text" onkeypress="return restrictInput(this, event, alphaOnly);">
<!-- To accept only numbers without dot -->
<input type="text" onkeypress="return restrictInput(this, event, digitsOnly);">
<!-- To accept only numbers and dot -->
<input type="text" onkeypress="return restrictInput(this, event, integerOnly);">
<!-- To accept only numbers and only one dot -->
<input type="text" onkeypress="return restrictInput(this, event, integerOnly, 'checkdot');">
<!-- To accept only characters for a username field -->
<input type="text" onkeypress="return restrictInput(this, event, usernameOnly);">

Ответ 10

Добавьте <script type="text/javascript" src="jquery.numeric.js"></script>, затем используйте

 $("element").numeric({ decimal: false, negative: false });

Ответ 11

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

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

Ответ 12

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

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);
});

Ответ 13

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

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" />

Ответ 14

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

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

Ответ 15

это также включит входы numpad.

.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;                                          
});

Ответ 16

Чтобы блокировать что-либо, кроме цифр, от ввода в текстовое поле, но все же позволяя другим кнопкам работать (например, удаление, сдвиг, вкладка и т.д.), смотрите ссылка на кодовые коды Javascript; что-либо от 65 до (222) может быть заблокировано.

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

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

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

Ответ 17

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

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;
    };

Ответ 18

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

// 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")));

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

Ответ 19

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

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

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

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

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

Ответ 20

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

 (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();

Ответ 21

Есть мое текущее решение числового ввода, необходимо протестировать в разных браузерах, но, похоже, работает

Поддержка запятой и разделителем периодов (czech native - запятая), ввода пробелов и цифр/клавиатуры. Разрешить Ctrl + C Ctrl + A или Ctrl + X, стрелка навигация и удаление Ctrl + V. Реагируйте на клавишу эвакуации путем размытия ввода.

Смотрите мой кофе script:

(($) ->
  $.fn.onlyNumbers = ->
    @each ->
      $(@).keydown (e) ->
        # get code of key
        code = if e.keyCode then e.keyCode else e.which

        return $(@).blur() if code is 27 # blur on escape
        return if code in [46, 8, 9, 13] # 46, 8, 9, 27, 13 = backspace, delete, tab, escape, and enter
        return if (e.ctrlKey or e.metaKey) and code in [65, 67, 88] # ctrl|command + [a, c, x]
        return if code in [96..105] # numpad numbers
        return if code in [48..57] # numbers on keyboard
        return if code in [35..39] # 35..39 - home, end, left, right
        return if code in [188, 190, 32] # comma, period, space
        return if code in [44] # comma, period,

        e.returnValue = false # IE hate you
        e.preventDefault();

      $(@).keypress (e) ->
        code = if e.keyCode then e.keyCode else e.which
        return if code in [44, 46, 32] # comma, period, space
        return if code in [48..57] # numbers on keyboard
        e.returnValue = false # IE hate you
        e.preventDefault();

) jQuery

Вы можете получить скомпилированный Javascript здесь http://goo.gl/SbyhXN

Ответ 22

Мои функции:

$('.input_integer_only').on('input', function(e) {
    $(this).val($(this).val().replace(/[^0-9]/g, ''));
});


$('.input_float_only').on('input', function(e) {
    var $var = $(this).val().replace(/[^0-9\.]/g, '');
    var $aVar = $var.split('.');

    if($aVar.length > 2) {
        $var = $aVar[0] + '.' + $aVar[1];
    }

    $(this).val($var);
});

Ответ 23

Вы можете внести изменения, чтобы принять код ключа для клавиш Ctrl: 17, 18, 19, 20. Тогда ваш код будет выглядеть следующим образом:

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) || (key==17) || (key==18) || (key==19) || (key==20))
   return true;     
else if ((("0123456789").indexOf(keychar) > -1))
   return true;
else if (decimal && (keychar == "."))
   return true;        
else
   return false;
}

Ответ 24

  document.getElementById('myinput').onkeydown = function(e) {
      if(!((e.keyCode > 95 && e.keyCode < 106)
      || (e.keyCode > 47 && e.keyCode < 58) 
      || e.keyCode == 8
      || e.keyCode == 9)) {
        return false;
      }
  }

Ответ 25

Вы можете сделать это так, чтобы принимать только цифры в текстовом поле,

 function onChange(event){
   var ckeckChars = /[^0-9]/gi;
   if(checkChars.test(event.target.value)) {
        event.target.value = event.target.value.replace(ckeckChars,"");
  }

Ответ 26

Эта функция JavaScript будет использоваться для ограничения алфавитов и специальных символов в текстовом поле, будут разрешены только цифры, удаление, клавиши со стрелками и обратная клавиша. Фрагмент кода JavaScript - Разрешить числа в TextBox, Ограничить алфавиты и специальные символы

Проверено в IE & Chrome.

Функция JavaScript

<script type="text/javascript">
    /*code: 48-57 Numbers
      8  - Backspace,
      35 - home key, 36 - End key
      37-40: Arrow keys, 46 - Delete key*/
    function restrictAlphabets(e){
        var x=e.which||e.keycode;
        if((x>=48 && x<=57) || x==8 ||
            (x>=35 && x<=40)|| x==46)
            return true;
        else
            return false;
    }
</script>

Исходный код HTML с JavaScript

<html>
    <head>
        <title>JavaScript - Allow only numbers in TextBox (Restrict Alphabets and Special Characters).</title>
        <script type="text/javascript">
            /*code: 48-57 Numbers
              8  - Backspace,
              35 - home key, 36 - End key
              37-40: Arrow keys, 46 - Delete key*/
            function restrictAlphabets(e){
                var x=e.which||e.keycode;
                if((x>=48 && x<=57) || x==8 ||
                    (x>=35 && x<=40)|| x==46)
                    return true;
                else
                    return false;
            }
        </script>
    </head>
<body style="text-align: center;">
    <h1>JavaScript - Allow only numbers in TextBox (Restrict Alphabets and Special Characters).</h1>
    <big>Enter numbers only: </big>
    <input type="text" onkeypress='return restrictAlphabets(event)'/>
</body>

</html>

Refrence

Ответ 27

Вы можете обрабатывать событие te на html, введя функцию keypresshandler

function keypresshandler(event)
{
     var charCode = event.keyCode;

     //You condition
     if (charCode == 58 ){

        event.preventDefault();

        return false;
     }        
}

Ответ 28

Javascript часто используется на стороне клиента браузера для выполнения простых задач, которые в противном случае потребовали бы полной обратной передачи на сервер. Многие из этих простых задач включают обработку текста или символов, введенных в элемент формы на веб-странице, и часто необходимо знать код javascript, связанный с символом. Вот ссылка.

Нажмите клавишу в текстовом поле ниже, чтобы увидеть соответствующий Javascript key code.

        function restrictCharacters(evt) {

            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (((charCode >= '48') && (charCode <= '57')) || (charCode == '44')) {
                return true;
            }
            else {
                return false;
            }
        }

Enter Text:
<input type="text" id="number" onkeypress="return restrictCharacters(event);" />