jQuery: was ist der beste Weg, um "Nummer" -nur Eingabe für Textfelder zu beschränken? (Dezimalpunkte zulassen)


Answers

Wenn Sie die Eingabe einschränken möchten (im Gegensatz zur Validierung), können Sie mit den Schlüsselereignissen arbeiten. etwas wie das:

<input type="text" class="numbersOnly" value="" />

Und:

jQuery('.numbersOnly').keyup(function () { 
    this.value = this.value.replace(/[^0-9\.]/g,'');
});

Dadurch kann der Benutzer sofort erkennen, dass er während der Validierungsphase keine Buchstaben usw. eingeben darf.

Sie möchten dennoch validieren, da die Eingabe möglicherweise durch Ausschneiden und Einfügen mit der Maus oder möglicherweise durch einen Formularautokompiler ausgefüllt wird, der die Schlüsselereignisse möglicherweise nicht auslöst.

Question

Was ist der beste Weg, um "Nummer" -Eingaben für Textfelder zu beschränken?

Ich suche nach etwas, das Dezimalpunkte erlaubt.

Ich sehe viele Beispiele. Aber muss noch entscheiden, welches man verwenden soll.

Update von Praveen Jeganathan

Keine weiteren Plugins, jQuery hat eine eigene jQuery.isNumeric () Version in Version 1.7 implementiert. Siehe: https://.com/a/20186188/66767




Ich habe zuerst versucht, dies mit jQuery zu lösen, aber ich war nicht glücklich über unerwünschte Zeichen (keine Ziffern), die tatsächlich im Eingabefeld angezeigt wurden, bevor sie bei der Schlüsselübergabe entfernt wurden.

Auf der Suche nach anderen Lösungen habe ich Folgendes gefunden:

Ganzzahlen (nicht negativ)

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {
    return oKeyEvent.charCode === 0 ||
        /\d/.test(String.fromCharCode(oKeyEvent.charCode));
  }
</script>

<form name="myForm">
<p>Enter numbers only: <input type="text" name="myInput" 
    onkeypress="return numbersOnly(this, event);" 
    onpaste="return false;" /></p>
</form>

Quelle: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress#Example Live Beispiel: http://jsfiddle.net/u8sZq/

Dezimalpunkte (nicht negativ)

Um einen einzelnen Dezimalpunkt zuzulassen, könnten Sie Folgendes tun:

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {        
    var s = String.fromCharCode(oKeyEvent.charCode);
    var containsDecimalPoint = /\./.test(oToCheckField.value);
    return oKeyEvent.charCode === 0 || /\d/.test(s) || 
        /\./.test(s) && !containsDecimalPoint;
  }
</script>

Quelle: Habe das gerade geschrieben. Scheint zu arbeiten. Live-Beispiel: http://jsfiddle.net/tjBsF/

Andere Anpassungen

  • Um zuzulassen, dass mehr Symbole getippt werden, fügen Sie diese nur dem regulären Ausdruck hinzu, der als basischer Zeichencodefilter fungiert.
  • Um einfache kontextabhängige Einschränkungen zu implementieren, sehen Sie sich den aktuellen Inhalt (Zustand) des Eingabefeldes an (oToCheckField.value)

Einige Dinge, an denen Sie interessiert sein könnten:

  • Nur ein Dezimalpunkt erlaubt
  • Lassen Sie das Minuszeichen nur zu, wenn es am Anfang der Zeichenfolge positioniert ist. Dies würde negative Zahlen ermöglichen.

Mängel

  • Die Caret-Position ist in der Funktion nicht verfügbar. Dadurch wurden die kontextbezogenen Einschränkungen, die Sie implementieren können, stark reduziert (z. B. keine zwei gleich aufeinanderfolgenden Symbole). Nicht sicher, was der beste Weg, um darauf zuzugreifen ist.

Ich weiß, dass der Titel nach jQuery-Lösungen fragt, aber hoffentlich wird jemand das trotzdem nützlich finden.




Als kleine Verbesserung dieses Vorschlags können Sie das Validierungs-Plugin mit seinen Methoden number() , digits und range verwenden. Im Folgenden wird beispielsweise sichergestellt, dass Sie eine positive Ganzzahl zwischen 0 und 50 erhalten:

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true,
      digits: true,
      range : [0, 50]
    }
  }
});



Das oben erwähnte numeric () - Plugin funktioniert nicht in Opera (Sie können die Back - oder Forward - Tasten nicht zurücksetzen, löschen oder sogar verwenden).

Der unten stehende Code sowohl in JQuery als auch in Javascript wird perfekt funktionieren (und es sind nur zwei Zeilen).

JQuery:

$(document).ready(function() {
    $('.key-numeric').keypress(function(e) {
            var verified = (e.which == 8 || e.which == undefined || e.which == 0) ? null : String.fromCharCode(e.which).match(/[^0-9]/);
            if (verified) {e.preventDefault();}
    });
});

Javascript:

function isNumeric(e)
{
    var keynum = (!window.event) ? e.which : e.keyCode;
    return !((keynum == 8 || keynum == undefined || e.which == 0) ? null : String.fromCharCode(keynum).match(/[^0-9]/));
}

Natürlich ist dies für reine numerische Eingabe (plus Rücktaste, Löschen, Vor / Zurück-Tasten) nur, kann aber leicht geändert werden, um Punkte und Minuszeichen zu enthalten.




    $(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

Dieser Code funktionierte ziemlich gut für mich, ich musste einfach die 46 im controlKeys-Array hinzufügen, um den Zeitraum zu verwenden, obwohl ich nicht der Meinung bin, dass dies der beste Weg ist;)




Der beste Weg besteht darin, die Inhalte des Textfelds zu überprüfen, wenn der Fokus verloren geht.

Sie können überprüfen, ob der Inhalt eine "Zahl" mit einem regulären Ausdruck ist.

Oder Sie können das Validierungs-Plugin verwenden, was im Grunde automatisch geschieht.




   window.jQuery.fn.ForceNumericOnly =
       function () {

           return this.each(function () {
               $(this).keydown(function (event) {
                   // Allow: backspace, delete, tab, escape, and enter
                   if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                       // Allow: Ctrl+A
                       (event.keyCode == 65 && event.ctrlKey === true) ||
                       // Allow: home, end, left, right
                       (event.keyCode >= 35 && event.keyCode <= 39)) {
                       // let it happen, don't do anything
                       return;
                   } else {
                       // Ensure that it is a number and stop the keypress
                       if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                           event.preventDefault();
                       }
                   }
               });
           });
       };

Und wenden Sie dies auf alle gewünschten Eingaben an:

$('selector').ForceNumericOnly();



Ich denke, das ist ein guter Weg, dieses Problem zu lösen, und es ist sehr einfach:

$(function() {
    var pastValue, pastSelectionStart, pastSelectionEnd;

    $("input").on("keydown", function() {
        pastValue          = this.value;
        pastSelectionStart = this.selectionStart;
        pastSelectionEnd   = this.selectionEnd;
    }).on("input propertychange", function() {
        var regex = /^[0-9]+\.?[0-9]*$/;

        if (this.value.length > 0 && !regex.test(this.value)) {
            this.value          = pastValue;
            this.selectionStart = pastSelectionStart;
            this.selectionEnd   = pastSelectionEnd;
        }
    });
});

Beispiel: JSFiddle

Szenarien abgedeckt

Die meisten ähnlichen Empfehlungen schlagen hier mindestens fehl oder erfordern viel Code, um alle diese Szenarien abzudecken.

  1. Lässt nur 1 Dezimalpunkt zu.
  2. Ermöglicht Start, end und die arrow .
  3. Ermöglicht das delete und die backspace für jeden Index.
  4. Erlaubt das Editieren bei jedem Index (solange die Eingabe mit der Regex übereinstimmt).
  5. Ermöglicht Strg + v und Shift + Einfügen für gültige Eingabe (gleiches mit Rechtsklick + Einfügen).
  6. keyup den keyup nicht, da das keyup Ereignis nicht verwendet wird.
  7. Stellt die Auswahl nach ungültiger Eingabe wieder her.

Szenarien fehlgeschlagen

  • Beginnend mit 0.5 und löschen nur die Null wird nicht funktionieren. Dies kann behoben werden, indem Sie die Regex in /^[0-9]*\.?[0-9]*$/ und dann ein Blur-Ereignis hinzufügen, um eine 0 /^[0-9]*\.?[0-9]*$/ wenn das Textfeld mit einem Dezimalpunkt beginnt (falls gewünscht) . Sehen Sie sich dieses erweiterte Szenario an, um eine bessere Vorstellung davon zu bekommen, wie das behoben werden kann.

Plugin

Ich habe dieses einfache jquery-Plugin erstellt , um dies einfacher zu machen:

$("input").limitRegex(/^[0-9]+\.?[0-9]*$/);



Führen Sie den Inhalt einfach über parseFloat () aus. Es wird NaN bei ungültiger Eingabe zurückgeben.




Das jquery.numeric Plugin hat einige Fehler, die ich dem Autor mitgeteilt habe. Es erlaubt mehrere Dezimalstellen in Safari und Opera, und Sie können keine Rücktaste, Pfeiltasten oder mehrere andere Steuerzeichen in Opera eingeben. Ich brauchte eine positive Ganzzahleingabe, so dass ich am Ende nur meine eigene geschrieben habe.

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});



Diese Funktion macht dasselbe, verwendet einige der obigen Ideen.

$field.keyup(function(){
    var val = $j(this).val();
    if(isNaN(val)){
         val = val.replace(/[^0-9\.]/g,'');
         if(val.split('.').length>2) val =val.replace(/\.+$/,"");
    }
    $j(this).val(val); 
});
  • Zeige visuelles Feedback (falscher Buchstabe erscheint vor dem Verschwinden)
  • erlaubt Dezimalstellen
  • fängt mehrere "."
  • hat keine Probleme mit links / rechts usw.



Keine Notwendigkeit für den langen Code für die Einschränkung der Zahleneingabe, versuchen Sie einfach diesen Code.

Es akzeptiert auch gültige int & float beide Werte.

Javascript-Ansatz

onload =function(){ 
  var ele = document.querySelectorAll('.number-only')[0];
  ele.onkeypress = function(e) {
     if(isNaN(this.value+""+String.fromCharCode(e.charCode)))
        return false;
  }
  ele.onpaste = function(e){
     e.preventDefault();
  }
}
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

jQuery Ansatz

$(function(){

  $('.number-only').keypress(function(e) {
	if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
  })
  .on("cut copy paste",function(e){
	e.preventDefault();
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

AKTUALISIEREN

Die obigen Antworten sind für den häufigsten Anwendungsfall - Eingabe als Zahl validieren.

Aber unten ist das Code-Snippet für spezielle Anwendungsfälle

  • Erlaube negative Zahlen
  • Zeigt den ungültigen Tastenanschlag vor dem Entfernen an.

$(function(){
      
  $('.number-only').keyup(function(e) {
        if(this.value!='-')
          while(isNaN(this.value))
            this.value = this.value.split('').reverse().join('').replace(/[\D]/i,'')
                                   .split('').reverse().join('');
    })
    .on("cut copy paste",function(e){
    	e.preventDefault();
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />




Das ist sehr einfach, dass wir bereits eine JavaScript eingebaute Funktion "isNaN" haben.

$("#numeric").keydown(function(e){
  if (isNaN(String.fromCharCode(e.which))){ 
    return false; 
  }
});



Eine andere Möglichkeit, die Caret-Position am Eingang beizubehalten:

$(document).ready(function() {
  $('.numbersOnly').on('input', function() {
    var position = this.selectionStart - 1;

    fixed = this.value.replace(/[^0-9\.]/g, '');  //remove all but number and .
    if(fixed.charAt(0) === '.')                  //can't start with .
      fixed = fixed.slice(1);

    var pos = fixed.indexOf(".") + 1;
    if(pos >= 0)
      fixed = fixed.substr(0,pos) + fixed.slice(pos).replace('.', '');  //avoid more than one .

    if (this.value !== fixed) {
      this.value = fixed;
      this.selectionStart = position;
      this.selectionEnd = position;
    }
  });
});

Vorteile:

  1. Der Benutzer kann die Pfeiltasten, Rücktaste, Löschen, ... verwenden.
  2. Funktioniert, wenn Sie Zahlen einfügen möchten

Plunker: Demo funktioniert









Related