Разрешить только числа в текстовом поле с использованием jquery без дополнительных плагинов

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

Я закодировал так:

if ( event.keyCode == 46 || event.keyCode == 8 || (event.keyCode >=48 && event.keyCode <=57)) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress           
            event.preventDefault();                   
        }

но он позволяет использовать специальные символы, такие как ! (Shift+1), @ (Shift+2) и т.д.

может ли кто-нибудь сказать мне полное решение для этого .. заранее спасибо


javascript jquery jquery-ui
person srini    schedule 26.12.2011    source источник

Ответы (7)


arrow_upward
4
arrow_downward

Это нерушимо.

// Prevent NULL input and replace text.
$(document).on('change', 'input[type="number"]', function (event) {
    this.value = this.value.replace(/[^0-9]+/g, '');
    if (this.value < 1) this.value = 0;
});

// Block non-numeric chars.
$(document).on('keypress', 'input[type="number"]', function (event) {
    return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
});
person Jonathan    schedule 26.06.2013

arrow_upward
3
arrow_downward 

<input type="text" onKeyUp="$(this).val($(this).val().replace(/[^\d]/ig, ''))" />

Это текстовое поле позволяет вводить только числа. Даже другие символы исчезают.

person maxatmin.com    schedule 19.03.2013
comment
Это решение не позволяет использовать запрошенные специальные символы. - person Ren; 19.03.2013

arrow_upward
2
arrow_downward

Вы можете использовать новый тип ввода html5 «число». Он будет принимать только число в качестве входных данных. Но это зависит от браузера, который поддерживает это или нет.

<input type="number" />

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

<input type="number" min="1" max="10" />
person Talha    schedule 26.12.2011

arrow_upward
2
arrow_downward

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

$('input[etype="Number"]').keydown(function(event) {

     if(event.shiftKey && ((event.keyCode >=48 && event.keyCode <=57) 
             || (event.keyCode >=186 &&  event.keyCode <=222))){
        // Ensure that it is a number and stop the Special chars
         event.preventDefault();
     }
     else if ((event.shiftKey || event.ctrlKey) && (event.keyCode > 34 && event.keyCode < 40)){     
          // let it happen, don't do anything
     }      
     else{
        // Allow only backspace , delete, numbers               
        if (event.keyCode == 9 || event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 39 ||event.keyCode == 37 
                || (event.keyCode >=48 && event.keyCode <=57)) {
            // let it happen, don't do anything
        }
        else {
           // Ensure that it is a number and stop the key press
                event.preventDefault();                   
        }
     }
    });
person srini    schedule 13.09.2012

arrow_upward
2
arrow_downward

Решение ниже:

  • позволяет использовать цифры на цифровой клавиатуре, а также на клавиатуре
  • не позволяет ctrl,alt,shift
  • позволяет клавише табуляции переходить к следующему текстовому полю
  • позволяет клавишам возврата, удаления и стрелкам перемещаться внутри вашего текстового поля

Он делает это, шаг за шагом проверяя, соответствует ли событие определенным критериям.

$(".onlyNumerics").keydown(function (event) {
    var num = event.keyCode;
    if ((num > 95 && num < 106) || (num > 36 && num < 41) || num == 9) {
        return;
    }
    if (event.shiftKey || event.ctrlKey || event.altKey) {
        event.preventDefault();
    } else if (num != 46 && num != 8) {
        if (isNaN(parseInt(String.fromCharCode(event.which)))) {
            event.preventDefault();
        }
    }
});
person Umesh K.    schedule 11.10.2012
comment
пожалуйста, прокомментируйте, если вы найдете полезным... :) - person Umesh K.; 11.10.2012

arrow_upward
0
arrow_downward

См. этот пример ниже. Вы можете предотвратить не числовые значения с помощью Regex.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function Numeric()
            {
                var field=document.iform.mob.value;            
                if (!field.match(/^[\-\+]?[\d\,]*\.?[\d]*$/))
                {
                    alert("Enter only Numerics");
                    return false;
                }
            }
        </script>
      </head>
      <body>
          <form name="iform" method="post">
              Add Your Mobile Number: <input type="text" name="mob" />
              <br/>
              <input type="submit" value="OK" onclick="return Numeric();" />
          </form>
      </body>
    </html>
person Hearaman    schedule 26.12.2011

arrow_upward
0
arrow_downward

Я просто добавлю еще один образец в список.

Я уже давно использую это в своих проектах. Функция привязана к keyup событию input[type=text]

function handleInputKeyup(e) {

    // if you want to enforce a minimum value 
    // declare somewhere else if need be
    const DEFAULT_VALUE = 1 

    //don't do anything if the text is empty
    if ($(this).val().length > 0) {
        const currentValue = Number($(this).val())

        if (isNaN(currentValue)) {
            $(this).val(DEFAULT_VALUE);
            return;
        }

        if (currentValue <= 0) {
            $(this).val(DEFAULT_VALUE);
            return;
        }
    }

}
person TechMky    schedule 08.04.2020