Разрешаване само на числа в текстовото поле с помощта на 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
  • позволява на клавиша tab да премине към следващото текстово поле
  • позволява на клавишите back-space, delete и клавишите със стрелки да се движат във вашето текстово поле

Той прави това, като проверява стъпка по стъпка дали събитието отговаря на определени критерии.

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