Eingabe in Textfeld einschränken: Nur Zahlen und Dezimalstellen zulassen

107

Wie kann ich die Eingabe auf ein Textfeld beschränken, sodass nur Zahlen und der Dezimalpunkt akzeptiert werden?

javascript  html 
— TinTin
quelle
11
Seine ursprüngliche Frage war großartig, Amar ... !!! Warum es ändern ..? ;)
— SpikETidE
14
Warum die Abstimmungen? Der Typ ist neu hier, hilf ihm, seine Aufgaben zu verbessern, bitte.
— Lexu
Ayyappan.Anbalagan, füge dem Beitrag einige Beispiele hinzu :) Sind alle diese Zeichenfolgen für dich korrekt? 192 192.168 192.168.0.1
— lak-b
Ich habe es Mann danke .. nur 22,22 formatieren auch es sollte nur 5 Zeichen in der txtbox erlauben ...
— TinTin
Was ist das Problem mit isNaN(this.textbox.value)?
— Sam007

Antworten:

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>
Erweitern Sie das Snippet

Das funktioniert wirklich!

— rebisco
quelle
1
Warum wird && charCode> 31 benötigt?
— Kontaktmatt
2
Zeichen 31 ist der Einheitentrenncode. Ziemlich viele Zahlen und Texte liegen zwischen 32 und höher. Der Code lautet: Sollte der eingegebene Zeichencode nicht dezimal sein UND höher als 31 (Einheitentrennzeichen), aber niedriger als 48 (Nummer Null) oder höher als 57 (Nummer Neun) sein, akzeptieren Sie ihn nicht.
— Paul Williams
9
if (charCode == 46 && evt.srcElement.value.split ('.'). length> 1) {return false; } Es wird mehrere '.'... :)
— Anish Karunakaran
10
einschließlich Tastenkombinationen und Perioden mit:&& charCode != 190 && charCode != 110 && (charCode > 105 || charCode < 96)
— mga
1
es akzeptiert mehr als eins '. [Punkt] ', was falsch ist, denke ich.
— Akshay Chawla
26 
form.onsubmit = function(){
    return textarea.value.match(/^\d+(\.\d+)?$/);
}

Ist es das, wonach du suchst?

Ich hoffe, es hilft.

BEARBEITEN: Ich habe mein Beispiel oben so bearbeitet, dass es nur einen Punkt geben kann, dem mindestens eine Ziffer vorangestellt ist und auf den mindestens eine Ziffer folgt.

— Tau
quelle
1
Ich denke, dies wird auch '99 .23.65.86 'validieren .... Aber ich denke, die Frage war,' 56987.32 'mit einem einzelnen Punkt zu validieren .....
— SpikETidE
Ich sehe, dass das Poster seitdem seine / ihre ursprüngliche Frage bearbeitet hat. Danke für das Update!
— Tau
1
Ich würde besser /^\d+([\.,‹\d+)?$/ verwenden, um internationale Zahlen zu unterstützen (wobei Komma anstelle von Punkt verwendet wird)
— FDIM
26

Die akzeptierte Lösung ist nicht vollständig, da Sie mehrere '.' Eingeben können, z. B. 24 .... 22..22. Mit einigen kleinen Änderungen funktioniert es wie vorgesehen:

<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>
Erweitern Sie das Snippet

— Hassan Mokdad
quelle
Ich habe Ihre Antwort verwendet, aber diese onkeypress = "return isNumberKey (this, event);"
— Bilbo Beutlin
Ja, ich denke, es ist optional, pass the event
— einzugeben
sparte uns ein paar Tastenanschläge .. tq
— Irf
Das einzige Problem bei diesem ist, dass Sie kopieren und in Text einfügen können. Das Hinzufügen zum Eingabeelement ondrop="return false;" onpaste="return false;" oncontextmenu="return false;"scheint ausreichend zu sein
— Clamchoda
Es ist für jeden Benutzer ein Misserfolg, zu verhindern, dass er Drag & Drop oder Kopieren und Einfügen verwendet.
— Hubert Grzeskowiak
19

Hier ist eine weitere Lösung, die Dezimalzahlen zulässt und die Nachkommastellen auf 2 Dezimalstellen begrenzt.

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)">
Erweitern Sie das Snippet

— Kurenai Kunai
quelle
Fast perfekt. In der letzten Bedingung iffehlt ein großgeschriebenes "C".
— DNKROZ
Schöne Lösung !!
— Michael Murray
Schön. Funktioniert perfekt für mich.
— Noor Ahmed
Beachten Sie, dass diese Lösung mehrere Punkte ( .), Striche ( ) -und den Buchstaben zulässt , ewenn Text in das Feld eingefügt oder dort abgelegt wird. Das HTML-Element zeigt außerdem zwei Pfeile zum Inkrementieren und Dekrementieren der Anzahl in Chrome an. Mit der Dekrementierungstaste kann die Zahl unter Null fallen.
— Hubert Grzeskowiak
12

Alle hier vorgestellten Lösungen verwenden einzelne Schlüsselereignisse. Dies ist sehr fehleranfällig, da die Eingabe auch über copy'n'paste oder drag'n'drop erfolgen kann. Auch einige der Lösungen beschränken die Verwendung von Nicht-Zeichen - Tasten wie ctrl+c, Pos1usw.

Ich schlage vor, anstatt bei jedem Tastendruck zu überprüfen, ob das Ergebnis in Bezug auf Ihre Erwartungen gültig ist.

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>
Erweitern Sie das Snippet

Das oninputEreignis wird unmittelbar nach einer Änderung im Textbereich und vor dem Rendern ausgelöst.

Sie können die RegEx auf jedes Zahlenformat erweitern, das Sie akzeptieren möchten. Dies ist weitaus wartbarer und erweiterbarer als die Überprüfung auf einzelne Tastendrücke.

— Hubert Grzeskowiak
quelle
Dies ist die eleganteste Lösung!
— JKD
4

Suchen Sie so etwas?

   <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
quelle
4

Sie müssen diese Methode nur in Jquery anwenden, und Sie können Ihr Textfeld so validieren, dass nur Zahlen mit einer Dezimalzahl akzeptiert werden.

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

Eine funktionierende Demo finden Sie hier

— Jitender Kumar
quelle
2

Für alle, die hier so stolpern wie ich, ist hier eine von mir geschriebene jQuery 1.10.2-Version, die für mich sehr gut funktioniert, wenn auch ressourcenintensiv:

/***************************************************
* 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
quelle
2

Eine kleine Korrektur zu @ rebiscos brillanter Antwort, um die Dezimalstelle perfekt zu validieren.

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
quelle
das ist sehr gut. Allerdings möchte ich es trotzdem auf 2 Dezimalstellen beschränken, um das zu tun?
— Nodeffect
2

Wenn Sie es für Float-Werte möchten,

Hier ist die Funktion, die ich benutze

<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>
Erweitern Sie das Snippet

— Rahul
quelle
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
quelle
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
quelle
1

Hier ist ein Skript, das Ihnen helfen kann:

<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
quelle
1

Angenommen, Ihr Textfeldfeldname lautet. Income
Rufen Sie diese Validierungsmethode auf, wenn Sie Ihr Feld validieren müssen:

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
quelle
1

Erweiterung der Antwort von @ rebisco. Dieser folgende Code erlaubt nur Zahlen und ein einzelnes '.' (Punkt) im Textfeld.

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
quelle
1

Bessere Lösung

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
quelle
0

Ausgehend von @rebisco Antwort:

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

Erlaubt nur dieses Format: 123123123 [.121213]

Demo hier Demo

— Babesh Florin
quelle
0

Hoffe es wird für dich funktionieren.

<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
quelle
0

Der folgende Code hat bei mir funktioniert

Das Eingabefeld mit dem Ereignis "onkeypress" lautet wie folgt

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

Die Funktion "isNumberKey" lautet wie folgt

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;
}
Erweitern Sie das Snippet

— Bharat Jain
quelle
0

Ich habe festgestellt, dass bei allen hier angegebenen Antworten die Dinge nicht funktionieren, wenn wir einen Teil des Textes im Textfeld auswählen und versuchen, diesen Teil zu überschreiben. Also habe ich die folgende Funktion geändert:

    <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
quelle
0

Für Dezimalzahlen und auch für Negativzahlen mit 2 Stellen für Dezimalstellen nach dem Punkt ... Ich habe die Funktion geändert zu:

<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
quelle
0

Eine alternative Möglichkeit, die Eingabe auf ein Textfeld zu beschränken, sodass nur Zahlen und der Dezimalpunkt akzeptiert werden, besteht darin, Javascript in der HTML-Eingabe zu verwenden. Das funktioniert bei mir:

<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')">

- Akzeptiert--

9

9,99

--Nicht akzeptieren--

9.99.99

ABC

— mpalencia
quelle
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;
}

Es erlaubt nur numerische und Sie können "." für dezimal.

— Kal-El
quelle
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)})

Das funktioniert gut.

— Banny
quelle
0

Beste und funktionierende Lösung mit Pure-Javascript-Beispiel Live-Demo: 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)" />
Erweitern Sie das Snippet

— Manoj Prajapat
quelle
0

Ich arbeite selbst an dem Thema, und das habe ich bisher. Dies funktioniert mehr oder weniger, aber aufgrund der neuen Wertprüfung ist es unmöglich, danach ein Minus hinzuzufügen. Erlaubt auch kein Komma als Tausendertrennzeichen, nur Dezimal.

Es ist nicht perfekt, könnte aber einige Ideen geben. 

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

Erlaubt:

11 11 .245 (im Controller, der auf Unschärfe auf 1111.245 formatiert ist)

11,44

-123.123

-1 014

0123 (formatiert auf Unschärfe bis 123)

erlaubt nicht:

! @ # $ / *

ABC

11.11.1

11,11.1

.42

— Jane Doe
quelle
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
quelle
0

Ich weiß, dass diese Frage sehr alt ist, aber wir bekommen oft solche Anforderungen. Es gibt viele Beispiele, aber viele scheinen zu ausführlich oder komplex zu sein für eine einfache Implementierung zu sein.

Siehe diese https://jsfiddle.net/vibs2006/rn0fvxuk/ und verbessern Sie sie (wenn Sie können). Es funktioniert mit IE, Firefox, Chrome und Edge Browser.

Hier ist der Arbeitscode. 

        
        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>
Erweitern Sie das Snippet

— vibs2006
quelle
0

Ich habe mich dazu entschlossen, dieses oninputProblem zu lösen, um das Problem beim Einfügen von Tastaturen, Einfügen von Mäusen und Tastenanschlägen zu lösen. Übergeben Sie true oder false, um die Validierung von Dezimalstellen oder Ganzzahlen anzuzeigen.

Es sind im Grunde drei Schritte in drei Einzeiler. Wenn Sie die Dezimalstellen nicht abschneiden möchten, kommentieren Sie den dritten Schritt. Anpassungen für die Rundung können auch im dritten Schritt vorgenommen werden.

// 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
quelle
0 
<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>

Sie können die vom Benutzer einzugebenden Werte einschränken, indem Sie den ASCII-Wertebereich angeben.
Beispiel : 48 bis 57 für numerische Werte (0 bis 9)

— SHASHANK PUJARI
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.