Ograniczenie wprowadzania do pola tekstowego: zezwalanie tylko na liczby i separator dziesiętny

108

Jak mogę ograniczyć dane wejściowe do pola tekstowego, aby akceptowało tylko liczby i przecinek dziesiętny?

javascript html TinTin
źródło

11

Jego pierwotne pytanie było świetne, Amar ... !!! Po co to zmieniać…? ;)

SpikETidE

14

Dlaczego głosy w dół? Facet jest tu nowy, pomóż mu ulepszyć jego questons, plz.

lexu

Ayyappan.Anbalagan, dodaj kilka przykładów do postu :) Czy wszystkie te struny są dla Ciebie odpowiednie? 192 192.168 192.168.0.1

lak-b

mam to stary dzięki .. tylko 22,22 mrówczan również powinien pozwolić tylko 5 znaków w txtbox ...

TinTin

W czym problem, isNaN(this.textbox.value)??

Sam007

158

<HTML>
  <HEAD>
    <SCRIPT language=Javascript>
       <!--
       function isNumberKey(evt)
       {
          var charCode = (evt.which) ? evt.which : evt.keyCode;
          if (charCode != 46 && charCode > 31 
            && (charCode < 48 || charCode > 57))
             return false;

          return true;
       }
       //-->
    </SCRIPT>
  </HEAD>
  <BODY>
    <INPUT id="txtChar" onkeypress="return isNumberKey(event)" 
           type="text" name="txtChar">
  </BODY>
</HTML>

Rozwiń fragment

To naprawdę działa!

rebisco
źródło

1

Dlaczego potrzebny jest && charCode> 31?

contactmatt

2

Znak 31 to kod separatora jednostek. Prawie wiele liczb i tekstu ma od 32 wzwyż. Kod brzmi, że jeśli wprowadzony kod znaku nie jest liczbą dziesiętną I jest większy niż 31 (separator jednostek), ale mniejszy niż 48 (liczba zero) lub większy niż 57 (numer dziewięć), nie akceptuj tego.

Paul Williams

9

if (charCode == 46 && evt.srcElement.value.split ('.'). length> 1) {return false; } Będzie to wielokrotne '.'... :)

Anish Karunakaran

10

zawierają klawisze numeryczne na klawiaturze i kropki z:&& charCode != 190 && charCode != 110 && (charCode > 105 || charCode < 96)

mga

1

akceptuje więcej niż jeden ”. [kropka] ”, co chyba jest błędne.

Akshay Chawla

26

form.onsubmit = function(){
    return textarea.value.match(/^\d+(\.\d+)?$/);
}

Czy tego szukasz?

Mam nadzieję, że to pomoże.

EDYCJA: Powyższy przykład zredagowałem tak, że może istnieć tylko jedna kropka, poprzedzona co najmniej jedną cyfrą, a po niej co najmniej jedna cyfra.

tau
źródło

1

Myślę, że to również zweryfikuje '99 .23.65.86 '.... Ale wydaje mi się, że pytanie dotyczyło walidacji' 56987.32 'z pojedynczą kropką .....

SpikETidE

widzę, że od tego czasu plakat zredagował swoje oryginalne pytanie. Dziękuję za aktualizację!

tau

1

Lepiej użyłbym /^\d+([\.,]\d+)?$/ do obsługi numerów międzynarodowych (gdzie przecinek jest używany zamiast kropki)

FDIM

26

Przyjęte rozwiązanie nie jest kompletne, ponieważ możesz wprowadzić wiele znaków „.”, Na przykład 24 .... 22..22. z niewielkimi modyfikacjami będzie działać zgodnie z przeznaczeniem:

<html>

<head>
  <script type="text/javascript">
    function isNumberKey(txt, evt) {
      var charCode = (evt.which) ? evt.which : evt.keyCode;
      if (charCode == 46) {
        //Check if the text already contains the . character
        if (txt.value.indexOf('.') === -1) {
          return true;
        } else {
          return false;
        }
      } else {
        if (charCode > 31 &&
          (charCode < 48 || charCode > 57))
          return false;
      }
      return true;
    }
  </script>
</head>

<body>
  <input type="text" onkeypress="return isNumberKey(this, event);" />
</body>

</html>

Rozwiń fragment

Hassan Mokdad
źródło

Użyłem twojej odpowiedzi, ale zmodyfikowałem to onkeypress = "return isNumberKey (this, event);"

Bilbo Baggins

tak myślę, że wpisanie zdaj zdarzenie jest opcjonalne, ponieważ działa w obu przypadkach, dzięki

Hassan Mokdad

uratował nam kilka kluczowych uderzeń ... tq

Irf

Jedynym problemem z tym jest to, że możesz skopiować wklej w tekście. Dodanie elementu input ondrop="return false;" onpaste="return false;" oncontextmenu="return false;"wydaje się być wystarczające

clamchoda

Uniemożliwienie każdemu użytkownikowi korzystania z metody „przeciągnij i upuść” lub „kopiuj i wklej” jest błędem.

Hubert Grzeskowiak

19

Oto jeszcze jedno rozwiązanie, które pozwala na liczby dziesiętne, a także ogranicza cyfry po przecinku do 2 miejsc po przecinku.

function isNumberKey(evt, element) {
  var charCode = (evt.which) ? evt.which : event.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode == 46 || charCode == 8))
    return false;
  else {
    var len = $(element).val().length;
    var index = $(element).val().indexOf('.');
    if (index > 0 && charCode == 46) {
      return false;
    }
    if (index > 0) {
      var CharAfterdot = (len + 1) - index;
      if (CharAfterdot > 3) {
        return false;
      }
    }

  }
  return true;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="rate" placeholder="Billing Rate" required onkeypress="return isNumberKey(event,this)">

Rozwiń fragment

Kurenai Kunai
źródło

Prawie idealnie… ostatni warunek Twojego stanu ifnie zawiera litery „C”.

DNKROZ

Piękne rozwiązanie !!

Michael Murray,

Piękny. U mnie działa idealnie.

Noor Ahmed

Zwróć uwagę, że to rozwiązanie pozwala na użycie wielu kropek ( .), myślnika ( -) i litery, egdy tekst jest wklejany lub upuszczany na pole. Element HTML będzie również wyświetlał dwie strzałki do domyślnie zwiększania i zmniejszania liczby w Chrome. Przycisk zmniejszania wartości umożliwia spadek liczby poniżej zera.

Hubert Grzeskowiak

12

Wszystkie prezentowane tutaj rozwiązania wykorzystują pojedyncze kluczowe zdarzenia. Jest to bardzo podatne na błędy, ponieważ dane wejściowe można również podać za pomocą kopiowania i wklejania lub przeciągania i upuszczania. Również niektóre z rozwiązań ograniczyć użycie kluczy bez znaków podobnych ctrl+c,Pos1 etc.

Sugeruję, aby zamiast sprawdzać każde naciśnięcie klawisza, sprawdzać, czy wynik jest zgodny z Twoimi oczekiwaniami.

var validNumber = new RegExp(/^\d*\.?\d*$/);
var lastValid = document.getElementById("test1").value;
function validateNumber(elem) {
  if (validNumber.test(elem.value)) {
    lastValid = elem.value;
  } else {
    elem.value = lastValid;
  }
}

<textarea id="test1" oninput="validateNumber(this);" ></textarea>

Rozwiń fragment

Plik oninputZdarzenie jest wywoływane po prostu coś się zmieniło w polu tekstowym i przed renderowane.

Możesz rozszerzyć wyrażenie regularne na dowolny format liczb, który chcesz zaakceptować. Jest to znacznie łatwiejsze w utrzymaniu i rozszerzaniu niż sprawdzanie pojedynczych naciśnięć klawiszy.

Hubert Grześkowiak
źródło

To najbardziej eleganckie rozwiązanie!

jkd

4

Szukasz czegoś takiego?

   <HTML>
   <HEAD>
   <SCRIPT language=Javascript>
      <!--
      function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

         return true;
      }
      //-->
   </SCRIPT>
   </HEAD>
   <BODY>
      <INPUT id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar">
   </BODY>
  </HTML>

lak-b
źródło

4

Wystarczy zastosować tę metodę w Jquery i zweryfikować swoje pole tekstowe, aby zaakceptować liczbę tylko z dziesiętną.

function IsFloatOnly(element) {    
var value = $(element).val(); 
var regExp ="^\\d+(\\.\\d+)?$";
return value.match(regExp); 
}

Zobacz działające demo tutaj

Jitender Kumar
źródło

2

Dla każdego, kto się tutaj potyka, tak jak ja, oto wersja jQuery 1.10.2, którą napisałem, która działa bardzo dobrze dla mnie, choć wymaga dużych zasobów:

/***************************************************
* Only allow numbers and one decimal in text boxes
***************************************************/
$('body').on('keydown keyup keypress change blur focus paste', 'input[type="text"]', function(){
    var target = $(this);

    var prev_val = target.val();

    setTimeout(function(){
        var chars = target.val().split("");

        var decimal_exist = false;
        var remove_char = false;

        $.each(chars, function(key, value){
            switch(value){
                case '0':
                case '1':
                case '2':
                case '3':
                case '4':
                case '5':
                case '6':
                case '7':
                case '8':
                case '9':
                case '.':
                    if(value === '.'){
                        if(decimal_exist === false){
                            decimal_exist = true;
                        }
                        else{
                            remove_char = true;
                            chars[''+key+''] = '';
                        }
                    }
                    break;
                default:
                    remove_char = true;
                    chars[''+key+''] = '';
                    break;
            }
        });

        if(prev_val != target.val() && remove_char === true){
            target.val(chars.join(''))
        }
    }, 0);
});

MonkeyZeus
źródło

2

Niewielka korekta genialnej odpowiedzi @ rebisco, która doskonale sprawdza ułamek dziesiętny.

function isNumberKey(evt) {
    debugger;
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode == 46 && evt.srcElement.value.split('.').length>1) {
        return false;
    }
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

Anish Karunakaran
źródło

to jest bardzo dobre. Chciałbym jednak ograniczyć to do 2 miejsc po przecinku, tak czy inaczej, żeby to zrobić?

nodeffect

2

Jeśli chcesz go dla wartości zmiennoprzecinkowych,

Oto funkcja, której używam

<HTML>

<HEAD>
  <SCRIPT language=Javascript>
    <!--
    function check(e, value) {
      //Check Charater
      var unicode = e.charCode ? e.charCode : e.keyCode;
      if (value.indexOf(".") != -1)
        if (unicode == 46) return false;
      if (unicode != 8)
        if ((unicode < 48 || unicode > 57) && unicode != 46) return false;
    }
    //-->
  </SCRIPT>
</HEAD>

<BODY>
  <INPUT id="txtChar" onkeypress="return check(event,value)" type="text" name="txtChar">
</BODY>

</HTML>

Rozwiń fragment

Rahul
źródło

1

inputelement.onchange= inputelement.onkeyup= function isnumber(e){
    e= window.event? e.srcElement: e.target;
    while(e.value && parseFloat(e.value)+''!= e.value){
            e.value= e.value.slice(0, -1);
    }
}

kennebec
źródło

1

function integerwithdot(s, iid){
        var i;
        s = s.toString();
        for (i = 0; i < s.length; i++){
            var c;
            if (s.charAt(i) == ".") {
            } else {
                c = s.charAt(i);
            }
            if (isNaN(c)) {
                c = "";
                for(i=0;i<s.length-1;i++){
                    c += s.charAt(i);
                }
                document.getElementById(iid).value = c;
                return false;
            }
        }
        return true;
    }

Jonas Reycian
źródło

1

oto skrypt, który Ci pomoże:

<script type="text/javascript">
// price text-box allow numeric and allow 2 decimal points only
function extractNumber(obj, decimalPlaces, allowNegative)
{
    var temp = obj.value;

    // avoid changing things if already formatted correctly
    var reg0Str = '[0-9]*';
    if (decimalPlaces > 0) {
        reg0Str += '\[\,\.]?[0-9]{0,' + decimalPlaces + '}';
    } else if (decimalPlaces < 0) {
        reg0Str += '\[\,\.]?[0-9]*';
    }
    reg0Str = allowNegative ? '^-?' + reg0Str : '^' + reg0Str;
    reg0Str = reg0Str + '$';
    var reg0 = new RegExp(reg0Str);
    if (reg0.test(temp)) return true;

    // first replace all non numbers
    var reg1Str = '[^0-9' + (decimalPlaces != 0 ? '.' : '') + (decimalPlaces != 0 ? ',' : '') + (allowNegative ? '-' : '') + ']';
    var reg1 = new RegExp(reg1Str, 'g');
    temp = temp.replace(reg1, '');

    if (allowNegative) {
        // replace extra negative
        var hasNegative = temp.length > 0 && temp.charAt(0) == '-';
        var reg2 = /-/g;
        temp = temp.replace(reg2, '');
        if (hasNegative) temp = '-' + temp;
    }

    if (decimalPlaces != 0) {
        var reg3 = /[\,\.]/g;
        var reg3Array = reg3.exec(temp);
        if (reg3Array != null) {
            // keep only first occurrence of .
            //  and the number of places specified by decimalPlaces or the entire string if decimalPlaces < 0
            var reg3Right = temp.substring(reg3Array.index + reg3Array[0].length);
            reg3Right = reg3Right.replace(reg3, '');
            reg3Right = decimalPlaces > 0 ? reg3Right.substring(0, decimalPlaces) : reg3Right;
            temp = temp.substring(0,reg3Array.index) + '.' + reg3Right;
        }
    }

    obj.value = temp;
}
function blockNonNumbers(obj, e, allowDecimal, allowNegative)
{
    var key;
    var isCtrl = false;
    var keychar;
    var reg;
    if(window.event) {
        key = e.keyCode;
        isCtrl = window.event.ctrlKey
    }
    else if(e.which) {
        key = e.which;
        isCtrl = e.ctrlKey;
    }

    if (isNaN(key)) return true;

    keychar = String.fromCharCode(key);

    // check for backspace or delete, or if Ctrl was pressed
    if (key == 8 || isCtrl)
    {
        return true;
    }

    reg = /\d/;
    var isFirstN = allowNegative ? keychar == '-' && obj.value.indexOf('-') == -1 : false;
    var isFirstD = allowDecimal ? keychar == '.' && obj.value.indexOf('.') == -1 : false;
    var isFirstC = allowDecimal ? keychar == ',' && obj.value.indexOf(',') == -1 : false;
    return isFirstN || isFirstD || isFirstC || reg.test(keychar);
}
function blockInvalid(obj)
{
    var temp=obj.value;
    if(temp=="-")
    {
        temp="";
    }

    if (temp.indexOf(".")==temp.length-1 && temp.indexOf(".")!=-1)
    {
        temp=temp+"00";
    }
    if (temp.indexOf(".")==0)
    {
        temp="0"+temp;
    }
    if (temp.indexOf(".")==1 && temp.indexOf("-")==0)
    {
        temp=temp.replace("-","-0") ;
    }
    if (temp.indexOf(",")==temp.length-1 && temp.indexOf(",")!=-1)
    {
        temp=temp+"00";
    }
    if (temp.indexOf(",")==0)
    {
        temp="0"+temp;
    }
    if (temp.indexOf(",")==1 && temp.indexOf("-")==0)
    {
        temp=temp.replace("-","-0") ;
    }
    temp=temp.replace(",",".") ;
    obj.value=temp;
}
// end of price text-box allow numeric and allow 2 decimal points only
</script>

<input type="Text" id="id" value="" onblur="extractNumber(this,2,true);blockInvalid(this);" onkeyup="extractNumber(this,2,true);" onkeypress="return blockNonNumbers(this, event, true, true);">

Fathi Amin
źródło

1

Załóżmy, że nazwa pola tekstowego to Income
Wywołaj tę metodę walidacji, gdy chcesz zweryfikować swoje pole:

function validate() {
    var currency = document.getElementById("Income").value;
      var pattern = /^[1-9]\d*(?:\.\d{0,2})?$/ ;
    if (pattern.test(currency)) {
        alert("Currency is in valid format");
        return true;
    } 
        alert("Currency is not in valid format!Enter in 00.00 format");
        return false;
}

Pallavi Agarwal
źródło

1

Rozszerzenie odpowiedzi @ rebisco. poniższy kod zezwoli tylko na cyfry i pojedynczy znak „.” (kropka) w polu tekstowym.

function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        } else {
            // If the number field already has . then don't allow to enter . again.
            if (evt.target.value.search(/\./) > -1 && charCode == 46) {
                return false;
            }
            return true;
        }
    }

Santosh Kurdekar
źródło

1

Lepsze rozwiązanie

var checkfloats = function(event){
    var charCode = (event.which) ? event.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
        return false;

    if(event.target.value.indexOf('.') >=0 && charCode == 46)
        return false;

    return true;
}

Allan Pereira
źródło

1

Postanowiłem rozwiązać ten problem na oninput wydarzenia, aby poradzić sobie z wklejaniem klawiatury, wklejaniem myszy i naciśnięciami klawiszy. Przekaż wartość true lub false, aby wskazać walidację dziesiętną lub całkowitą.

Zasadniczo to trzy kroki w trzech liniach. Jeśli nie chcesz skracać liczb dziesiętnych, skomentuj trzeci krok. Korekty zaokrąglania można również dokonać w trzecim kroku.

// Example Decimal usage;
// <input type="text"  oninput="ValidateNumber(this, true);" />
// Example Integer usage:
// <input type="text"  oninput="ValidateNumber(this, false);" />
function ValidateNumber(elm, isDecimal) {
    try {

        // For integers, replace everything except for numbers with blanks.
        if (!isDecimal) 
            elm.value = elm.value.replace(/[^0-9]/g, ''); 
        else {
            // 1. For decimals, replace everything except for numbers and periods with blanks.
            // 2. Then we'll remove all leading ocurrences (duplicate) periods
            // 3. Then we'll chop off anything after two decimal places.

            // 1. replace everything except for numbers and periods with blanks.
            elm.value = elm.value.replace(/[^0-9.]/g, '');

            //2. remove all leading ocurrences (duplicate) periods
            elm.value = elm.value.replace(/\.(?=.*\.)/g, '');

            // 3. chop off anything after two decimal places.
            // In comparison to lengh, our index is behind one count, then we add two for our decimal places.
            var decimalIndex = elm.value.indexOf('.');
            if (decimalIndex != -1) { elm.value = elm.value.substr(0, decimalIndex + 3); }
        }
    }
    catch (err) {
        alert("ValidateNumber " + err);
    }
}

clamchoda
źródło

0

Zaczynając od @rebisco odpowiedź:

function count_appearance(mainStr, searchFor) {
    return (mainStr.split(searchFor).length - 1);
}
function isNumberKey(evt)
{
    $return = true;
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31
            && (charCode < 48 || charCode > 57))
        $return = false;
    $val = $(evt.originalTarget).val();
    if (charCode == 46) {
        if (count_appearance($val, '.') > 0) {
            $return = false;
        }
        if ($val.length == 0) {
            $return = false;
        }
    }
    return $return;
}

Dopuszcza tylko ten format: 123123123 [.121213]

Demo tutaj demo

Babesh Florin
źródło

0

Mam nadzieję, że to zadziała.

<input type="text" onkeypress="return chkNumeric(event)" />

<script>
    function chkNumeric(evt) {
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            if (charCode == 46) { return true; }
            else { return false; }
        }
        return true;
    }
</script>

Ankur Kumar
źródło

0

Poniższy kod zadziałał dla mnie

Pole wprowadzania ze zdarzeniem „onkeypress” w następujący sposób

<input type="text" onkeypress="return isNumberKey(this,event);" />

Funkcja „isNumberKey” jest następująca

function isNumberKey(txt, evt) {
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode == 46) {
    //Check if the text already contains the . character
    if (txt.value.indexOf('.') === -1) {
        return true;
    } else {
        return false;
    }
  } else {
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
  }
  return true;
}

Rozwiń fragment

Bharat Jain
źródło

0

Zauważyłem, że dla wszystkich udzielonych tutaj odpowiedzi rzeczy nie działają, jeśli zaznaczymy część tekstu w polu tekstowym i spróbujemy nadpisać tę część. Zmodyfikowałem więc funkcję jak poniżej:

    <HTML>
  <HEAD>
    <SCRIPT language=Javascript>
       <!--
       function isNumberKey(evt)
       {
         var charCode = (evt.which) ? evt.which : event.keyCode;

if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
{
        return false;
}
 if (charCode == 46 && evt.srcElement.value.split('.').length>1 )
    {

        return false;

    } 

 if(evt.srcElement.selectionStart<evt.srcElement.selectionEnd)
    {
          return true;
    }

  if(evt.srcElement.value.split('.').length>1 && evt.srcElement.value.split('.')[1].length==2)
  {

     return false;
  }


    return true;
       }


       //-->
    </SCRIPT>
  </HEAD>
  <BODY>
    <INPUT id="txtChar" onkeypress="return isNumberKey(event)" 
           type="text" name="txtChar">
  </BODY>
</HTML>

Abhishek Gahlout
źródło

0

Dla liczb dziesiętnych, a także dopuszczających liczby ujemne z 2 miejscami dziesiętnymi po przecinku ... Zmodyfikowałem funkcję, aby:

<input type="text" id="txtSample" onkeypress="return isNumberKey(event,this)"/>



function isNumberKey(evt, element){

        var charCode = (evt.which) ? evt.which : event.keyCode
        if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode == 46 || charCode == 8 || charCode == 45))
            return false;
        else {
            var len = $(element).val().length;

            // Validation Point
            var index = $(element).val().indexOf('.');
            if ((index > 0 && charCode == 46) || len == 0 && charCode == 46) {
                return false;
            }
            if (index > 0) {
                var CharAfterdot = (len + 1) - index;
                if (CharAfterdot > 3) {
                    return false;
                }
            }

            // Validating Negative sign
            index = $(element).val().indexOf('-');
            if ((index > 0 && charCode == 45) || (len > 0 && charCode == 45)) {
                return false;
            }
        }
        return true;
    }

Chris Rosete
źródło

0

alternatywnym sposobem ograniczenia danych wejściowych do pola tekstowego, tak aby akceptowało tylko liczby i przecinek dziesiętny, jest użycie javascript w danych wejściowych HTML. To działa dla mnie:

<input type="text" class="form-control" id="price" name="price" placeholder="Price" 
vrequired onkeyup="this.value=this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')">

- Akceptuje--

9

9,99

--Nie akceptuje--

9,99,99

ABC

mpalencia
źródło

0

function isNumberKey(evt)
{
    var charCode = (evt.which) ? evt.which : evt.keyCode;

    if(charCode==8 || charCode==13|| charCode==99|| charCode==118 || charCode==46)
    {    
        return true;  
    }

    if (charCode > 31 && (charCode < 48 || charCode > 57))
    {   
        return false; 
    }
    return true;
}

Pozwoli to tylko na numeryczne i pozwoli wstawić „.” dla dziesiętnych.

Kal-El
źródło

0

<script type="text/javascript">

    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

        return true;
    }

</script>

@Html.EditorFor(model => model.Orderids, new { id = "Orderids", Onkeypress=isNumberKey(event)})

To działa dobrze.

banny
źródło

0

Najlepsze i działające rozwiązanie z przykładową demonstracją na żywo w czystym Javascript: https://jsfiddle.net/manoj2010/ygkpa89o/

<script>
function removeCommas(nStr) {
    if (nStr == null || nStr == "")
        return ""; 
    return nStr.toString().replace(/,/g, "");
}

function NumbersOnly(myfield, e, dec,neg)
{        
    if (isNaN(removeCommas(myfield.value)) && myfield.value != "-") {
        return false;
    }
    var allowNegativeNumber = neg || false;
    var key;
    var keychar;

    if (window.event)
        key = window.event.keyCode;
    else if (e)
        key = e.which;
    else
        return true;
    keychar = String.fromCharCode(key);
    var srcEl = e.srcElement ? e.srcElement : e.target;    
    // control keys
    if ((key == null) || (key == 0) || (key == 8) ||
                (key == 9) || (key == 13) || (key == 27))
        return true;

    // numbers
    else if ((("0123456789").indexOf(keychar) > -1))
        return true;

    // decimal point jump
    else if (dec && (keychar == ".")) {
        //myfield.form.elements[dec].focus();
        return srcEl.value.indexOf(".") == -1;        
    }

    //allow negative numbers
    else if (allowNegativeNumber && (keychar == "-")) {    
        return (srcEl.value.length == 0 || srcEl.value == "0.00")
    }
    else
        return false;
}
</script>
<input name="txtDiscountSum" type="text" onKeyPress="return NumbersOnly(this, event,true)" />

Rozwiń fragment

Manoj Prajapat
źródło

0

Sam pracuję nad tym problemem i to mam do tej pory. To mniej więcej działa, ale nie można później dodać minus ze względu na nową kontrolę wartości. Nie zezwala również na przecinek jako separator tysięcy, tylko po przecinku.

Nie jest doskonały, ale może dać kilka pomysłów.

app.directive('isNumber', function () {
            return function (scope, elem, attrs) {
                elem.bind('keypress', function (evt) {
                    var keyCode = (evt.which) ? evt.which : event.keyCode;
                    var testValue = (elem[0].value + String.fromCharCode(keyCode) + "0").replace(/ /g, ""); //check ignores spaces
                    var regex = /^\-?\d+((\.|\,)\d+)?$/;                        
                    var allowedChars = [8,9,13,27,32,37,39,44,45, 46] //control keys and separators             

                   //allows numbers, separators and controll keys and rejects others
                    if ((keyCode > 47 && keyCode < 58) || allowedChars.indexOf(keyCode) >= 0) {             
                        //test the string with regex, decline if doesn't fit
                        if (elem[0].value != "" && !regex.test(testValue)) {
                            event.preventDefault();
                            return false;
                        }
                        return true;
                    }
                    event.preventDefault();
                    return false;
                });
            };
        });

Umożliwia:

11 11 .245 (w kontrolerze sformatowanym przez rozmycie do 1111.245)

11,44

-123,123

-1 014,

0123 (sformatowany jako rozmycie do 123)

nie pozwala:

! @ # $ / *

ABC

11.11.1

11,11.1

.42

Jane Doe
źródło

0

<input type="text" onkeypress="return isNumberKey(event,this)">

<script>
   function isNumberKey(evt, obj) {

            var charCode = (evt.which) ? evt.which : event.keyCode
            var value = obj.value;
            var dotcontains = value.indexOf(".") != -1;
            if (dotcontains)
                if (charCode == 46) return false;
            if (charCode == 46) return true;
            if (charCode > 31 && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }


</script>

Karthik
źródło

0

Wiem, że to pytanie jest bardzo stare, ale wciąż często otrzymujemy takie wymagania. Istnieje wiele przykładów, ale wiele z nich wydaje się być zbyt rozwlekłych lub skomplikowanych, aby można je było łatwo wdrożyć.

Zobacz ten https://jsfiddle.net/vibs2006/rn0fvxuk/ i popraw go (jeśli możesz). Działa w przeglądarce IE, Firefox, Chrome i Edge.

Oto działający kod.

        
        function IsNumeric(e) {
        var IsValidationSuccessful = false;
        console.log(e.target.value);
        document.getElementById("info").innerHTML = "You just typed ''" + e.key + "''";
        //console.log("e.Key Value = "+e.key);
        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":             
                 IsValidationSuccessful = true;
                 break;
                 
						 case "Decimal":  //Numpad Decimal in Edge Browser
             case ".":        //Numpad Decimal in Chrome and Firefox                      
             case "Del": 			// Internet Explorer 11 and less Numpad Decimal 
                 if (e.target.value.indexOf(".") >= 1) //Checking if already Decimal exists
                 {
                     IsValidationSuccessful = false;
                 }
                 else
                 {
                     IsValidationSuccessful = true;
                 }
                 break;

             default:
                 IsValidationSuccessful = false;
         }
         //debugger;
         if(IsValidationSuccessful == false){
         
         document.getElementById("error").style = "display:Block";
         }else{
         document.getElementById("error").style = "display:none";
         }
         
         return IsValidationSuccessful;
        }

Numeric Value: <input type="number" id="text1" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" /><br />
    <span id="error" style="color: Red; display: none">* Input digits (0 - 9) and Decimals Only</span><br />
    <div id="info"></div>

Rozwiń fragment

vibs2006
źródło

0

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>

Możesz ograniczyć wartości do wprowadzenia przez użytkownika, określając zakres wartości ASCII.
Przykład : od 48 do 57 dla wartości liczbowych (od 0 do 9)

SHASHANK PUJARI
źródło

Ograniczenie wprowadzania do pola tekstowego: zezwalanie tylko na liczby i separator dziesiętny

Odpowiedzi: