Numerische Validierung

[Marie]

Erstmal Gratulation zu diesem Forum. Es ist wahrlich TOP!

Ich möchte als Input nur Zahlen akzeptieren und habe eine Lösung da gefunden:
http://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input

Und zwar diese Lösung:

<input type="text"
       onkeydown="return (event.ctrlKey || event.altKey
                            || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false)
                            || (95<event.keyCode && event.keyCode<106)
                            || (event.keyCode==8) || (event.keyCode==9)
                            || (event.keyCode>34 && event.keyCode<40)
                            || (event.keyCode==46)
                            || (event.keyCode==13))"
       style="width:144px" name="eingabewert" maxlength="12">

Das funktioniert bestens. Allerdings wird es ab 2 Eingabefeldern ökonomischer den Javascriptcode in eine Funktion auszulagern.

Irgendwie so:

Javascript:
<script type="text/javascript">
function NumVal (Feld) {
    if (keyCode(Feld) ==  ( event.ctrlKey || event.altKey
            || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false)
            || (95<event.keyCode && event.keyCode<106)
            || (event.keyCode==8) || (event.keyCode==9)
            || (event.keyCode>34 && event.keyCode<40)
            || (event.keyCode==46)
            || (event.keyCode==13)))
    {return true;}
    else
    {return false;}
}
</script>

HTML:
<input type="text"
       onkeydown="NumVal(this.value)"
       style="width:144px" name="eingabewert" maxlength="12">

Wo ist etwas falsch?

[Marie]

Erstmal Gratulation zu diesem Forum. Es ist wahrlich TOP!

Ich möchte als Input nur Zahlen akzeptieren und habe eine Lösung da gefunden:
http://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input

Und zwar diese Lösung:

<input type="text"
       onkeydown="return (event.ctrlKey || event.altKey
                            || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false)
                            || (95<event.keyCode && event.keyCode<106)
                            || (event.keyCode==8) || (event.keyCode==9)
                            || (event.keyCode>34 && event.keyCode<40)
                            || (event.keyCode==46)
                            || (event.keyCode==13))"
       style="width:144px" name="eingabewert" maxlength="12">

Das funktioniert bestens. Allerdings wird es ab 2 Eingabefeldern ökonomischer den Javascriptcode in eine Funktion auszulagern.

Irgendwie so:

Javascript:
<script type="text/javascript">
function NumVal (Feld) {
    if (keyCode(Feld) ==  ( event.ctrlKey || event.altKey
            || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false)
            || (95<event.keyCode && event.keyCode<106)
            || (event.keyCode==8) || (event.keyCode==9)
            || (event.keyCode>34 && event.keyCode<40)
            || (event.keyCode==46)
            || (event.keyCode==13)))
    {return true;}
    else
    {return false;}
}
</script>

HTML:
<input type="text"
       onkeydown="NumVal(this.value)"
       style="width:144px" name="eingabewert" maxlength="12">

Wo ist etwas falsch?

So läuft es bei mir:
function NumVal (Feld) {
    if (Feld ==  ( event.ctrlKey || event.altKey
            || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false)
            || (95<event.keyCode && event.keyCode<106)
            || (event.keyCode==8) || (event.keyCode==9)
            || (event.keyCode>34 && event.keyCode<40)
            || (event.keyCode==46)
            || (event.keyCode==13)))
    {}
    else
    {return false;}
}

<input type="text"
       onkeyup="NumVal(this.value)"
       style="width:144px" name="eingabewert" maxlength="12">

Beim if keyCode weggelassen (und "return true;" überflüssig). Weiters onkeydown mit onkeyup ersetzt. Klar, bei onkeydown steht nichts in der Eingabe und kann auch nichts übergeben werden. Aber bei if im javascript mehr Dusel als Verstand? ;-)
Funktioniert das bei euch auch?

[Gunnar Bittersmann]

@@Marie:

nuqneH

Funktioniert das bei euch auch?

Ich kriege problemlos Buchstaben in das Eingabefeld.

Qapla'

[Marie]

Ich hab mit den Kommentarklammern geschlampt. Geht also bei mir auch nicht. :-(

[Gunnar Bittersmann]

@@Marie:

nuqneH

Ich hab mit den Kommentarklammern geschlampt. Geht also bei mir auch nicht. :-(

??

Ich glaube, du hast mich missverstanden. Wie ich bereits sagte, bekommt mit mit anderen Eingabearten als Tastatur nichtnumerische Werte an deinem Script vorbei ins Eingabefeld.

Qapla'

[Jörg Reinholz]

Funktioniert das bei euch auch?

Also WENN die Eingabe nur browserseitig ausgewertet wird, dann kannst Du eine solche Methode auch anwenden.

Aber WENN die Eingabe serverseitig (PHP, PERL, ASP...) ausgewertet wird, dann MUSST Du die Eingabe auch serverseitig validieren.

Das wirft folgendes auf:

<input type="number"> ist eine gute Idee, dann nimmt der Browser Dir die Arbeit ab. Dann brauchst Du das Skript eigentlich nicht.

Geht es Dir darum, schon bei einem "Tastendruck" zu validieren? Warum korrigierst Du die Eingabe dann nicht?
Berücksichtige "deutsche Gewohnheiten", wie das Komma als Dezimaltrennzeichen.

Was hast Du eigentlich gegen Number()?
Ich bin gespannt auf Deine Erweiterung hinsichtlich der Einschränkung auf ganze Zahlen oder Zahlenbereiche.

<!DOCTYPE html>  
<html lang="de">  <!-- das wird ausgewertet -->  
<head>  
<script type="text/javascript">

  
function NumVal2 (elem) {  
    data=elem.value;  
  
    // wenn Sprache deutsch ist kommas durch Punkte ersetzen:  
    if (document.lang='de') {  
       data=data.replace(',' , '.');  
       elem.value=data;  
    }  
    if (Number(data)==data) {  
        document.getElementById("output").innerHTML='OK';  
    }  else {  
        document.getElementById("output").innerHTML='Fehler!';  
        elem.value=data.substring(0, data.length-1);  
    }  
}

</script>  
</head>  
<body>  
<input type="text" name="eingabe"  
       onkeyup="NumVal2(this)"  
       onchange="NumVal2(this)"  
       style="width:144px" name="eingabewert" maxlength="12">  
<br />  
<div id="output"></div>  
</body>  
</html>

Jörg Reinholz

[Gunnar Bittersmann]

@@Marie:

nuqneH

<input type="text"
       onkeydown="NumVal(this.value)"
       style="width:144px" name="eingabewert" maxlength="12">

Wo ist etwas falsch?

In jeder Zeile etwas.

(1) Wenn du nur numerische Werte als Eingabe haben willst, setze @type="number", nicht "text". Sonst stirbt ein Kätzchen.

Nutzer von Geräten mit virtueller Tastatur bekommen damit eine numerische Tastaur. Eine ungültige Eingabe kann mit CSS (Pseudoklasse :invalid) kenntlich gemacht werden.

Das macht das JavaScript für inzwischen viele Besucher überflüssig. Eine serverseitige Prüfung muss ohnehin vorgenommen werden. Dennoch zum JavaScript ein paar Worte:

(2) 'keydown' wäre das falsche Event; es ist ja nicht gesagt, dass der Nutzer die Eingabe per Tastatur tätigt. 'change' wäre das richtige.

'keyCode' halte ich auch für keine gute Idee. Ist denn die Zuordnung von Tastencodes zu Zeichen auf jedem System die gleiche? Wenn schon, dann wären die *Zeichen* im Eingabefeld abzufragen, nicht die gedrückten Tasten. Von denen es – wie gesagt – gar keine geben muss.

(3) Sämtliche Darstellungsangaben sollten im Stylesheet stehen, nicht inline in @style-Attributen im Markup.

Qapla'

[Marie]

Opera, Safari und IE lassen bei number trotzdem Buchstaben zu. Opera malt zusätzlich Pfeile.
Chrome und Firefox scheint zu funktionieren. Insgesamt aber natürlich ist number so keine Lösung.
Die Funktionalität genügt mir so wie sie ist, nur eben als Funktion. Sollte doch einfach funktionieren?

[Gunnar Bittersmann]

@@Marie:

nuqneH

Die Funktionalität genügt mir so wie sie ist

Vom Nutzer zu erwarten, nur Ziffern zu tippen, ihm aber eine alphanumerisches virtuelle Tastatur anzubieten, verdient nicht die Note „genügend“.

Qapla'

[Marie]

Number bei Chrome und Firefox funktioniert auch nicht. Buchstaben werden bei beiden akzeptiert. Und bei Chrome werden ebenfalls diese schönen Pfeile gemalt wie bei Opera.

[dedlfix]

Tach!

Sonst stirbt ein Kätzchen.

Jedes gestorbene Kätzchen kann nicht mehr verwildern und dann mehr schaden als nützen.

dedlfix.

[Gunnar Bittersmann]

@@dedlfix:

nuqneH

Jedes gestorbene Kätzchen kann nicht mehr verwildern und dann mehr schaden als nützen.

Die Jagdsaison ist eröffnet.

Katze, Hund, Pferd, ist am Ende auch egal.

Qapla'

[JürgenB]

Hallo Gunnar,

Jedes gestorbene Kätzchen kann nicht mehr verwildern und dann mehr schaden als nützen.

Die Jagdsaison ist eröffnet.

Katze, Hund, Pferd, ist am Ende auch egal.

es bleibt die Frage: Was soll in die Lasagne?

Gruß, Jürgen

[Der Martin]

Hallo,

Jedes gestorbene Kätzchen kann nicht mehr verwildern und dann mehr schaden als nützen.
Die Jagdsaison ist eröffnet.
Katze, Hund, Pferd, ist am Ende auch egal.

genau: Kopf ab, Schwanz ab, Hase.
Und morgen gibt's original schwäbische Gaultaschen.

Ciao,
 Martin

[MudGuard]

Hi,

Katze, Hund, Pferd, ist am Ende auch egal.

genau: Kopf ab, Schwanz ab, Hase.
Und morgen gibt's original schwäbische Gaultaschen.

Als Vorspeise vor dem Zwiebelrossbraten? ;-)

cu,
Andreas