Real time Rechner (AJAX/JS)

[Rolf B]

Hallo MaxiG,

deine fachliche Konzeption ist unklar.

Du schreibst, dass Du zwei Eingabefelder möchtest, und wenn man im Feld X einen Wert ändert, soll gerechnet werden und dann Feld X mit diesem Wert überschrieben werden. Sicherlich ist das nicht das, was Du meinst, denn eine solche Anwendung wäre unbedienbar (ich will 12 eingeben, tippe die 1, du rechnest und machst eine 3 draus bevor ich die 2 eintippen konnte).

Dein gezeigter Code ist ganz anders. Du hast zwei Eingabefelder, und bei jeder Änderung in einem der beiden Felder berechnest Du einen neuen Wert und setzt ihn in ein span Element ein. Das ist sinnvoller. Allerdings ist in diesem Code keine Rede mehr von Variablen, deren Wert in die Berechnung eingehen soll.

Zur Umsetzung:

• du solltest Dich nicht auf das keyup Event registrieren. Für den von Dir beabsichtigten Zweck ist das input-Event vorgesehen. Es feuert auch dann, wenn der Anwender mit Cut+Paste einen Wert ins Feld einsetzt. Das ist bei keyup nicht der Fall.

• wenn Du Zahlen mit Dezimalstellen erwartest, dann kannst Du zum einen nicht input type="number" verwenden - das kann nur ganze Zahlen. Und zum anderen musst Du Dir über die Zahlendarstellung klar werden. Standardmäßig verwendet JavaScript einen Dezimalpunkt und interpretiert das Komma als ungültiges Zeichen, d.h. der Wert von "1,234" wäre 1. Du musst also folgendes überlegen:

  • soll das Zeichen "," als Dezimaltrennzeichen dienen?
  • soll das Zeichen "." als Dezimaltrennzeichen dienen?
  • willst Du auch ein Tausendertrennzeichen akzeptieren können?

  Diese so harmlose Frage ist ein hochkomplexes Thema, weil jeder Anwender ein anderes Gefühl dafür hat, was richtig ist und was falsch. Was bedeutet 1.234? Eintausendzweihundertvierunddreißig? Eins Punkt zwei drei vier, im Sinne von $$\frac{1234}{1000}$$? Ist 1,234.56 eine richtige Eingabe? Ist 1.234,56 richtig? Was ist mit dem Schweizerischen 1'234.56^[1]?

  Die einfachste Lösung ist, sowohl Punkt als auch Komma als Dezimaltrennzeichen zu akzeptieren und die Anwender per Hinweis auf der Maske aufzufordern, keine Tausendertrennzeichen zu verwenden.

  Eine gewisse Absicherung der Eingabe kannst Du über das pattern-Attribut des input-Elements bekommen. Damit kannst Du einen regulären Ausdruck angeben, den die Eingabe erfüllen muss. Der ist nicht ganz trivial, denn du musst ja Eingaben wie "123", "123.", ".123" und "123.456" akzeptieren, aber "." nicht. Mein Pattern für solche Fälle ist "(?![.,]$)\d*([.,]\d*)?". Input-Patterns werden recht gut unterstützt. Mit dem Pattern kannst Du im JavaScript die Gültigkeit abfragen. Alte Browser, die pattern nicht kennen, lassen dann falsche Eingaben durch und die Rechnung ergibt ggf. Blödsinn. Aber bei richtigen Eingaben kommt auch das richtige heraus. Es ist deine Entscheidung, wie streng du das nehmen willst.

   var eingabe1 = document.getElementById('feld1').value.replace(',', '.');
   var wert1 = parseFloat(eingabe1);

   if (wert1 < minimum || wert1 > maximum) {
      // Bereichsfehler, man sollte eine Fehlermeldung anzeigen
      eingabe1.setCustomValidity("Wert muss im Bereich ... bis ... liegen");
   }
   if (eingabe1.validity && !eingabe1.validity.valid) {
      // fehler, man könnte hier bspw. einfach das Script verlassen.
      return;
   }

setCustomValidity ist Teil des Constraint Validation API, das vom IE11 noch nicht vollständig unterstützt wird. Wenn Du Dich mit diesem API nicht herumschlagen willst, verwende für Fehlermeldungen bei Falscheingaben einfach ein weiteres Ausgabefeld. Aber: Eingabeüberprüfungen sind wichtig. Auf die kann man nicht eben mal so verzichten. Leider besteht ein großer Teil von Programmen, die Benutzerdaten empfangen, daraus.

Für weitere Ratschläge müsstest Du deine fachliche Anforderung konkretisieren. Wieviele Eingabefelder hast Du? Wieviele Ausgabefelder? Was genau soll bei einer Eingabe in ein Eingabefeld passieren (ich gebe in Feld 1 eine Ziffer ein. Daraufhin wird .... berechnet. Das Ergebnis wird in Feld ... geschrieben)

Wenn Du Werte für deine Berechnung brauchst, die der Benutzer nicht eingibt, dann müsstest du sagen können, wo die herkommen.

Rolf

---

1. Nein, Gunnar, nicht 1’234.56. ↩︎