Zahlenkontrolle per Direkteingabe!

simon117 · 05.10.2010

Hallo,

ich hab nen Problem ich möchte das in meinen Textfeld,per Direkteingabe keine Buchstaben eingeben kann oder besser gesagt wenn man einen Buchstaben eingebt soll ein Alert aufgehen.Ich bin jetzt soweit das er im Summe feld mekert wenn man Buchstaben eingibt.Aber schließlich erst mit einer Abfrage...

Hier ist der javascript:

PHP:

<html>
  <head>
    <title>Kleiner Rechner</title>
    <script type="text/javascript">

      function fSumme()
        {
          var dZahl1 = parseFloat(document.Form1.txtZahl1.value);
          var dZahl2 = parseFloat(document.Form1.txtZahl2.value);
          var dSumme = dZahl1 + dZahl2;
          document.Form1.txtSumme.value = dSumme;
          }
          
    </script>
    <script type="text/javascript">
function CheckZahl (dSumme) {
  if (isNaN(Wert)) {
    alert(dZahl1 + " ist keine Zahl!");
    alert(dZahl2 + " ist keine zahl!");
  }
</script>
    
  </head>
  <body>
    <h3>Kleinere Rechner</h3>
    <form method="get" name="Form1">
      1. Zahl =
      <input type="text" name="txtZahl1"></input>
      <br>
      2. Zahl =
      <input type="text" name="txtZahl2"></input>
      <br>
      <input type="button" name="btnSumme" value="Summe ermitteln" onClick="fSumme()"></input>
      <br>
      Summe =
      <input type="text" name="txtSumme"></input>
    </form>
  </body>
</html>

EDIT:Vielleicht dann auch nen AJAX umbauen das er wenn ich die die 2te Zahl eingegeben habe das er dann er dann direkt das Ergebnis im txtSumme ausgibt.

Duddle · 05.10.2010

AW: Zahlenkontrolle per Direkteingabe!

Hmmm, da du bereits onClick kennst, hast du zumindest irgendwann mal etwas von Events gehört. Es gibt noch ein paar mehr:
Du kannst also bei jedem Tastendruck / Loslassen einer Taste deine Prüf-Funktion starten. Mit dem gleichen Prinzip kannst du auch das Ergebnis direkt anzeigen lassen.

Sobald du dann die Grundlagen verstanden hast, solltest du dich aber in ein Framework einlesen. Das nimmt dir viele dieser immer wiederkehrenden Aufgaben ab - in Form von Komfort-Funktionen oder PlugIns. Oft genannt und noch öfter benutzt ist zum Beispiel

Bitte kostenlos registrieren, damit du die Links siehst.

zu empfehlen.

Duddle

saila · 05.10.2010

AW: Zahlenkontrolle per Direkteingabe!

Hi,

wenn du kein JS-Framework einsetzt, wäre deine Funktion wie folgt (getestet):

Code:

function keypress(obj) {
    var thisVal = obj.value;
    var reg        = /^[\d]+$/;
    var exp        = reg.exec(thisVal);
    if(exp != null) {
        document.getElementById('px').value = thisVal;
    } else {
        document.getElementById('px').value = thisVal.substr(0, obj.value.length - 1);
    }
}

Dein input-tag-text müsste so aussehen:

Code:

<input type="text" value="" name="px" id="px" onkeyup="keypress(this);" />

Durch das einsetzen von jQuery (als Bsp. genannt), würde sich der Functions-Code abkürzen lassen. Wobei das optional ist.

Doitsu · 05.10.2010

AW: Zahlenkontrolle per Direkteingabe!

.. du gibst das Element an die Funktion mit, dann brauchst du es nicht noch mal per getElementById holen. Am Anfang benutzt du ja auch 'obj.value' um den Wert zu holen.
Dazu macht es wenig Sinn, den Inhalt noch mal in das Eingabefeld zu schreiben, wenn er richtig ist - er ist ja schliesslich schon drin.

Wuerde sich also auf das reduzieren:

Code:

function keypress(obj) {
    var thisVal = obj.value;
    var reg        = /^[\d]+$/;
    var exp        = reg.exec(thisVal);
    if(exp == null) {
        obj.value = thisVal.substr(0, obj.value.length - 1);
    }
}

saila · 05.10.2010

AW: Zahlenkontrolle per Direkteingabe!

Das mag absolut stimmen, aber es gibt hier wenn möglich keine fertigen Lösungen. Selbst nachdenken ist letztlich der beste Lehrmeister.

Da aber nun schon eine Optimierung erfolgte, kann auch die komplette Lösung genannt werden:

Code:

function keypress(obj) {
    var reg        = /^[\d]+$/;
    if(reg.exec(obj.value) === null) {
        obj.value = obj.value.substr(0, obj.value.length - 1);
    }
}

Duddle · 05.10.2010

AW: Zahlenkontrolle per Direkteingabe!

Ich kann es mir nicht verkneifen:

Code:

function keypress(obj) {
	obj.value = obj.value.replace(/[^\d]/g, "");
}

Duddle

saila · 05.10.2010

AW: Zahlenkontrolle per Direkteingabe!

Evtl. kommt ja noch eine Optimierung

SineTempore · 06.10.2010

AW: Zahlenkontrolle per Direkteingabe!

Ich habe einen Bug in gefunden.
Wenn man zuerst ein paar Zahlen eingibt, dann mit dem Cursor nach vorne geht, kann man anschließend Buchstaben eingeben.
Nichts für ungut

VG

saila · 06.10.2010

AW: Zahlenkontrolle per Direkteingabe!

Cool - alles getroffen?