input Eingabe

roland_k

HI zusammen,

ich habe ein Input feld und will das nur zahlen von 1-157 oder der buchstabe M angenommen werden .

welchen code schreibe ich da ??

Danke roland_k

m.scatello

Tipp: solche Fragen lassen sich wunderbar mit ChatGPT beantworten.

Code

<input type="text" id="inputField" name="inputField" 
         pattern="^(1[0-4][0-9]|15[0-7]|[1-9]?[0-9]|M)$" 
         title="Geben Sie eine Zahl von 1 bis 157 oder den Buchstaben M ein." 
         required>

roland_k

Hi danke erst mal.

ist das getestet ? ich kann in dem feld alles reinschreiben ohne dass was passiert ??

pattern

gruss roland_k

m.scatello

Du musst schon ein Formular haben

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pattern</title>
</head>
<body>
<form action="" method="POST">
 <input type="text" id="inputField" name="inputField" 
         pattern="^(1[0-4][0-9]|15[0-7]|[1-9]?[0-9]|M)$" 
         title="Geben Sie eine Zahl von 1 bis 157 oder den Buchstaben M ein." 
         required >
</form>
</body>
</html>

Alles anzeigen

Eingeben kann man alles, aber abschicken des Formulars geht nur, wenn das Richtige eingegeben wurde. Wenn du schon die Eingabe verhindern willst, dann musst du das mit JavaScript machen.

Sempervivum

Möglicher Weise hilft es schon weiter, wenn Du mit der Pseudoklasse :invalid das Eingabefeld rot markierst:

Code

input#inputField {
    outline: none;
}
input#inputField:invalid {
    border: 2px solid red;
}

Oder, wenn Du den Benutzer ganz an einer ungültigen Eingabe hindern willst, mit Javascript, dann sind die Bedingungen ohnehin besser lesbar und klarer:

Code

    <script>
        document.getElementById('inputField').addEventListener('input', event => {
            const
                input = event.target,
                val = input.value;
            // Prüfen ob eine gültige Eingabe vorliegt:
            if (val == '' || parseInt(val) >= 1 && parseInt(val) <= 157 || val == 'M') {
                // Die Eingabe ist gültig, wir speichern den Wert:
                input.dataset.validValue = val;
            } else {
                // Die Eingabe ist ungültig, wir setzen die Eingabe
                // auf den letzten gültigen Wert zurück:
                input.value = input.dataset.validValue;
            }
        });
    </script>

Alles anzeigen

roland_k

Nabend, danke ersst mal.

Code

input#inputField {    outline: none;
}
input#inputField:invalid {    border: 2px solid red;
}

funktioniert bei mir nicht ??

wäre es möglich den code funktionierend zu erkären ??

was muss ich wie und wo einfügen ...........im code editor ??

danke gruss roland

roland_k

Möglicher Weise hilft es schon weiter, wenn Du mit der Pseudoklasse :invalid das Eingabefeld rot markierst:

Code

input#inputField {    outline: none;
}
input#inputField:invalid {    border: 2px solid red;
}

Oder, wenn Du den Benutzer ganz an einer ungültigen Eingabe hindern willst, mit Javascript, dann sind die Bedingungen ohnehin besser lesbar und klarer:

Code

    <script>        document.getElementById('inputField').addEventListener('input', event => {            const                input = event.target,                val = input.value;            // Prüfen ob eine gültige Eingabe vorliegt:            if (val == '' || parseInt(val) >= 1 && parseInt(val) <= 157 || val == 'M') {                // Die Eingabe ist gültig, wir speichern den Wert:                input.dataset.validValue = val;            } else {                // Die Eingabe ist ungültig, wir setzen die Eingabe                // auf den letzten gültigen Wert zurück:                input.value = input.dataset.validValue;            }        });    </script>


oder  fehlt da noch was ??  

gruss roland

Sempervivum

Ich bin bei meinem Vorschlag von dem aus gegangen, was unter deinem Link zu sehen war. D. h. das Eingabefeld muss die ID "inputField" und das Pattern haben.

Das CSS dann in style-Tags und in den Head-Bereich stellen:

Code

<style>
    input#inputField {
        outline: none;
    }
    input#inputField:invalid {
        border: 2px solid red;
    }
</style>

Siehe auch hier:

CSS/Tutorials/Einstieg/Stylesheets einbinden – SELFHTML-Wiki

roland_k

jetzt habe es gefunden, funktioniert , Danke

Code

input#inputField {    outline: none;
}
input#inputField:invalid {    border: 2px solid red;
}

hatte nicht kapiert dass das CSS ist.

Gruss roland

roland_k

Zitat von m.scatello
Du musst schon ein Formular haben
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pattern</title>
</head>
<body>
<form action="" method="POST">
 <input type="text" id="inputField" name="inputField" 
         pattern="^(1[0-4][0-9]|15[0-7]|[1-9]?[0-9]|M)$" 
         title="Geben Sie eine Zahl von 1 bis 157 oder den Buchstaben M ein." 
         required >
</form>
</body>
</html>
Alles anzeigen
Eingeben kann man alles, aber abschicken des Formulars geht nur, wenn das Richtige eingegeben wurde. Wenn du schon die Eingabe verhindern willst, dann musst du das mit JavaScript machen.

roland_k

Hallo guten Tag ,

kannst Du bitte zeigen wie das mit JS geht

Danke

Gruss Roland

Sempervivum

Gern, in meinem Posting #5 sind ja schon script-Tags drum herum. Das an das Ende des body, vor das schließende </body> stellen. Das pattern in dem <input> brauchst Du dann nicht.

roland_k

Vielen Dank,

ich habe es kapiert

habe eben Grundlagenprobleme.

wenn ich funktionierenden code habe ..........versuche ich mit learning by doing das für mein Problem umzusetzen.

ich hätte noch ein reines JS Problem ? kann ich das hier posten ??

Danke

Gruss roland

PS: ich bin 77 und habe gesundheitliche probleme, drum auch die späte antwort.

Sempervivum

Wenn es ganz etwas anderes ist, dann mach besser einen neuen Thread auf.

Jetzt mitmachen!