• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Abfangen der Falscheingaben bei Textfeldern

A

amigo89

New member
Hallo zusammen,

ich möchte gerne bei einem <input text>-feld eine Clientseitige Einschränkung definieren.
Ich bin leider realtiv unerfahren was Javascript angeht, ich programmiere hauptsächlich mit PHP, dadurch müsste ich allerdings die fehlerhaften Eingaben durch Errormeldungen ausgeben, was doch realtiv nervig sein wird.

Gibt es eine Möglichkeit bei einem Textfeld z.B. Uhrzeit, dass folgende default Werte hat: 00:00:00, die Eingabe auf z.B: 25:00:00 Uhr zu verbieten, sprich dass ich es gar nicht erst eingeben kann?

Würde mich freuen, wenn man mir helfen könnte! :)

Grüße,
amigo
 
Du könntest über den onkeydown Listener eine sofortige Feldprüfung durchführen und entsprechend reagieren. Allerdings ist bei sowas immer schwierig zu unterscheiden, ob der Mensch noch tippt oder ob er fertig ist. Wenn ich in deinem Feld dann mit 2 anfange zu tippen ist das ja noch ungültig. 2:00:00 hingegen wäre dann ok.
Daher würde ich Feldprüfungen immer frühestens beim absenden eines Formulars durchführen. Weiterhin muss ich davor warnen, Prüfungen nur in JS machen zu wollen. Lass deine PHP seitigen Prüfungen auf jeden Fall zusätzlich drin für den Fall, dass jemand deine Browserprüfungen durch Manipulation umgeht.
 
Kommt drauf an, was genau er mit "eingeben" meint. Es gibt Feld-verlassen, Feld-erreichen, Taste-drücken, Taste-loslassen usw. Wenn es grob reicht und die Feinprüfung weiterhin serverseitig in PHP erfolgt ist die HTML5 Feldprüfung natürlich gut geeignet.
 
Ich würde zwei Dinge machen: im onkeypress nur die Zeichen durchlassen, die an der aktuellen Cursorposition auch hinkommen dürfen, und im onsubmit dann nochmal strikter prüfen.

Das in onkeypress ich auch nicht so kompliziert, wie es zuerst scheinen mag:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Nur Zeit eingeben</title>
<style type="text/css"></style>
</head>
<body>
Nur Zeit: <input id="input">
<script type="text/javascript">
document.getElementById("input").onkeypress = function(ev){
	ev = ev? ev: window.event;
	if (ev.charCode < 32){
		return;
	}
	var ret = true;
	var newValue =
		this.value.substring(0, this.selectionStart) +
		String.fromCharCode(ev.charCode) +
		this.value.substring(this.selectionEnd);
	var parts = newValue.split(":");
	if (parts.length > 3){
		ret = false;
	}
	for (var i = 0; i < parts.length; i += 1){
		if (!parts[i].match(/^\d{0,2}$/)){
			ret = false;
		}
		parts[i] = parseInt(parts[i], 10) || 0;
		if (parts[i] >= 60){
			ret = false;
		}
	}
	if (parts[0] > 24){
		ret = false;
	}
	else if (parts[0] === 24 && (parts[1] || parts[2])){
		ret = false;
	}
	
	if (!ret){
		if (ev.preventDefault){
			ev.preventDefault();
		}
		else {
			ev.returnValue = false;
		}
	}
};
</script>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben