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

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

39 голосов
/ 22 сентября 2010

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

Ответы [ 28 ]

0 голосов
/ 09 апреля 2019

Эта функция JavaScript будет использоваться для ограничения алфавитов и специальные символы в текстовом поле, только цифры, удаление, клавиши со стрелками и Backspace будет разрешено. Фрагмент кода 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

0 голосов
/ 30 ноября 2017

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

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

        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);" />
0 голосов
/ 16 августа 2013

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

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

Смотри мой сценарий Кофе: 

(($) ->
  $.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

0 голосов
/ 02 декабря 2016

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

 function onChange(event){
   var ckeckChars = /[^0-9]/gi;
   if(checkChars.test(event.target.value)) {
        event.target.value = event.target.value.replace(ckeckChars,"");
  }
0 голосов
/ 27 сентября 2016 
  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;
      }
  }
0 голосов
/ 29 декабря 2014

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

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

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

        event.preventDefault();

        return false;
     }        
}
0 голосов
/ 29 октября 2013

Мои функции: 

$('.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);
});
0 голосов
/ 28 января 2014

Вы можете внести изменения, чтобы принять код клавиши для клавиш 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;
}
Страница:
...