web-dev-qa-db-de.com

Wenn Sie einen Punkt mit JavaScript ersetzen, wird alles entfernt

Ich bin in ein seltsames Problem geraten. Beim Versuch, einen Punkt an einer Zahleneingabe zu ersetzen, wird nicht die gesamte Eingabe ersetzt, sondern die gesamte Eingabe.

$("[data-input-payment-id]").on("keyup", function(e) {
  var test_value = $(this).val().replace(/\./g, "");
  $(this).val(test_value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" data-input-payment-id="12">

JSFIDDLE

Wie ändere ich es so, dass nur die Punkte entfernt werden?

16
Ellisan

Ich denke, das liegt daran, dass Sie type="number" verwenden. Dann werden Ziffern gefolgt von einem Punkt, z. 123. ist keine gültige Zahl, und val gibt ein leeres Ergebnis zurück.

Sie könnten dies stattdessen versuchen:

$("[data-input-payment-id]").on("keyup", function(e) {
  var test_value = this.value.replace(/[^\d,]/g, "");
  $(this).val(test_value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input data-input-payment-id="12">

Dies verwendet den normalen Texttyp und filtert alles, außer Ziffern im Ersetzen.

Bearbeiten:
Änderte die Regex so, dass sie mit Ausnahme von Zahlen und Kommas übereinstimmt.

11
SamWhan

Ich würde:

  • Hören Sie sich statt des Ereignisses keyup das Ereignis input an. Auf diese Weise können Sie auch das Einfügen zulassen.
  • Notieren Sie sich den vorherigen korrekten Wert, damit Sie darauf zurückkehren können. Dies ist notwendig, da type=number-Eingaben eine leere Zeichenfolge als Wert haben, sobald die Eingabe ungültig wird (als Zahl). Ich würde diesen vorherigen korrekten Wert in einer data - Eigenschaft des input-Elements speichern
  • Mit der Eigenschaft validity.stepMismatch können Sie wissen, ob der aktuelle Wert die step-Eigenschaft der input verletzt, die standardmäßig 1 ist. Bei einem Schritt von 1 bedeutet dies, dass die Eingabe einer Zahl mit einem Dezimaltrennzeichen als nicht übereinstimmend gilt.
  • Da ein nachfolgendes Dezimaltrennzeichen (noch) keine Bruchzahl ergibt, wird die obige Validierung bestanden. Wenn alle Einstellungen in Ordnung sind, geben Sie den Wert in die Eingabe zurück. Dadurch werden eventuell nachgestellte Dezimaltrennzeichen entfernt.

$("[data-input-payment-id]").on("input", function (e) {
    if (!this.validity.stepMismatch) {
        $(this).data("lastValid", $(this).val());
    };
    $(this).val($(this).data("lastValid") || "");  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number"data-input-payment-id="12">

Allerdings bin ich persönlich nicht dafür, die Benutzereingaben auf diese Weise zu blockieren: Sie könnten für einen Moment denken, dass ihre Tastatur kaputt ist. Meiner Meinung nach ist es besser, dem Benutzer die Möglichkeit zu geben, irgendetwas einzugeben, und durch eine Meldung neben der Eingabe anzugeben, dass die Eingabe ungültig ist (bis sie gültig ist).

2
trincot

Dies ist nicht wirklich eine Lösung, wie ich es persönlich gerne sehen würde, aber hier habe ich getan, um das vorliegende Problem zu lösen. Ich habe den JavaScript-Code geändert, um auf Keycode 46 (den .) zu hören, und ich gebe false im Listener für das Einfügen von Ereignissen zurück, um das Einfügen eines Werts in die Eingabe zu deaktivieren.

$("[data-input-payment-id]").on("keypress", function(e) {
  var key = e.charCode ? e.charCode : e.keyCode;
  if (key == 46) {
    return false;
  }
});
$("[data-input-payment-id]").on("paste", function(e) {
  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" data-input-payment-id="12">

Es funktioniert zumindest in Chrome und Edge.

2
Ellisan

Ihr Keypress-Beispiel hat mir diese Idee gebracht. Wenn Sie das Tastendruckereignis abfangen können, können Sie die Gültigkeitsprüfung überprüfen, bevor Sie den tatsächlichen Wert hinzufügen. Dieses Beispiel erfordert ebenfalls keine Bedingungen und kann beliebige Nicht-Ziffernwerte filtern.

$("[data-input-payment-id]").on("keypress", function(e) {
  if ((this.value + e.key).match(/\D/)) {
    return false;
  }
});
$("[data-input-payment-id]").on("paste", function(e) {
  var pasteData = (e.originalEvent.clipboardData || window.clipboardData).getData('text');
  pasteData = pasteData.replace(/\D/g, '');
  this.value = this.value + pasteData;
  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" data-input-payment-id="12">

  • Ermöglicht das Einfügen von Daten mit Filterung
  • Keine spezifischen Bedingungen
  • Kann für benutzerdefinierte Validierung geändert werden

http://jsfiddle.net/xpvt214o/511118/

2
cnvzmxcvmcx

Siehe MDN-Dokumente zu inputs vom Typ number:

Wert

Eine Zahl, die eine Zahl darstellt oder leer ist

Wenn die Eingabezeichenfolge nicht in eine korrekte Zahl umgewandelt werden kann (z. B. wenn die Zeichenfolge zwei Punkte enthält), wird beim Zugriff auf die Eigenschaft .value die leere Zeichenfolge zurückgegeben.

Die Funktion .value (und val()) gibt weiterhin strings zurück, aber diese Zeichenfolgen müssen gültige Zahlen darstellen (oder die leere Zeichenfolge sein). Anstatt den Wert des Elements unbedingt festzulegen, prüfen Sie einfach, ob der Wert nicht der leere String ist:

$("[data-input-payment-id]").on("keyup", function(e) {
  const val = $(this).val();
  if (val === '') return;
  var test_value = $(this).val().replace(/\./g, "");
  $(this).val(test_value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" data-input-payment-id="12">

Oder Sie verwenden möglicherweise eine Texteingabe und möglicherweise eine pattern:

$("[data-input-payment-id]").on("keyup", function(e) {
  const val = $(this).val();
  var test_value = $(this).val().replace(/\./g, "");
  $(this).val(test_value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input data-input-payment-id="12">
  <input type="submit">
</form>

<form>
<input pattern="^\d+$" data-input-payment-id="12">
<input type="submit">
</form>

1

$(this).val() liefert eine leere Zeichenfolge zurück, wenn eine Eingabe mit type="number" mehrere .-Werte enthält. 

Sie können dies beheben, indem Sie das Ersetzen des Werts nur ausführen, wenn $(this).val() keine leere Zeichenfolge zurückgibt.

0
Lars Munkholm