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
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
Du musst schon ein Formular haben
<!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.
Möglicher Weise hilft es schon weiter, wenn Du mit der Pseudoklasse :invalid das Eingabefeld rot markierst:
Oder, wenn Du den Benutzer ganz an einer ungültigen Eingabe hindern willst, mit Javascript, dann sind die Bedingungen ohnehin besser lesbar und klarer:
<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
Möglicher Weise hilft es schon weiter, wenn Du mit der Pseudoklasse :invalid das Eingabefeld rot markierst:
Code
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
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:
<style>
input#inputField {
outline: none;
}
input#inputField:invalid {
border: 2px solid red;
}
</style>
Siehe auch hier:
CSS/Tutorials/Einstieg/Stylesheets einbinden – SELFHTML-Wiki
Du musst schon ein Formular haben
HTMLAlles anzeigen<!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>
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.
Hallo guten Tag ,
kannst Du bitte zeigen wie das mit JS geht
Danke
Gruss Roland
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.
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.
Wenn es ganz etwas anderes ist, dann mach besser einen neuen Thread auf.
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.