JavaScript und Formularfelder

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

19:30, 22.6.2009

Hi,
bin ja grad am Lernen von JS.
Möchte nun mit Inputfeldern rumexperimentieren.
Hab das meiste gegooglet, aber so lern ich am besten ^^
Ich hab ein Tastaturfeld:

<table bgcolor="silver" align="center"><tr><td>
<form name="Tastatur" method="post" action="tresor.php">
<tr><td colspan="3"><input type="text" name="feldwerte" maxlength="4" size="3" readonly="readonly" onkeypress="CheckStr(this)" onFocus="CheckStr()" onBlur="CheckStr()" onChange="CheckStr()" onKeyDown="CheckStr()" onKeyUp="CheckStr()"></td></tr>
<tr><td><input type="button" value="&nbsp;1&nbsp;" onclick="schreib('1')"></td>
<td><input type="button" value="&nbsp;2&nbsp;" onclick="schreib('2')"></td>
<td><input type="button" value="&nbsp;3&nbsp;" onclick="schreib('3')"></td></tr>
<tr><td><input type="button" value="&nbsp;4&nbsp;" onclick="schreib('4')"></td>
<td><input type="button" value="&nbsp;5&nbsp;" onclick="schreib('5')"></td>
<td><input type="button" value="&nbsp;6&nbsp;" onclick="schreib('6')"></td></tr>
<tr><td><input type="button" value="&nbsp;7&nbsp;" onclick="schreib('7')"></td>
<td><input type="button" value="&nbsp;8&nbsp;" onclick="schreib('8')"></td>
<td><input type="button" value="&nbsp;9&nbsp;" onclick="schreib('9')"></td></tr>
<tr><td></td><td><input type="button" value="&nbsp;0&nbsp;" onclick="schreib('0')"></td><td></td></tr>
<tr><td colspan="3"><input type=button value="L&ouml;schen" onclick="reset(),loesch()">
</td></tr>
</form>
</td></tr></table>

Die Zahlen werden dann in einem Inputfeld eingetragen.
Und die eine Funktion ist zum Löschen der Eingabe:

var wert="";
var a="";
var b="";
function schreib(wert)
{
a=a+wert;
document.Tastatur.feldwerte.value=a;
}
function loesch()
{
b=a;
a="";
}

Das klappt ganz gut, jedoch möchte ich nur eine Maxlength haben.
Jedoch funktioniert das nicht, da die Zahlen ja nicht in das Feld direkt eingetragen werden.

Hab auch dazu ein passendes Script, das ich aber nicht so richtig verstehe:

<script>
function CheckStr(feld){
   var max=3, textinhalt = feld.value;
   if (textinhalt.length = max) {
      feld.value=textinhalt.substring(0,max);
   }
}
</script>
<form name="Tastatur" method="post" action="tresor.php">
<input onkeypress="CheckStr(this)" name="feldwerte">
</form>

Das klappt aber auch.

Aber wenn ich versuch beides zu kombinieren geht es nicht.

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
~~c****s~~
20:07, 22.6.2009
Das kann auch gar nicht funktionieren, weil der Ausdruck (textinhalt.length = max) IMMER nach true geht.
Es gibt einen kleinen, aber feinen Unterschied zwischen dem Zuweisungsoperator = und dem Vergleichsoperator ==.

Für mal folgenden Code aus, dann siehst du den Unterschied.
```
function func()
{
	var eins = 1;
	var zwei = 2;
	if (eins == zwei)
		alert ("true");
	else
		alert ("false");
	if (eins = zwei)
		alert ("true");
	else
		alert ("false");
}
```

~~e********l~~

9:29, 23.6.2009

Auch wenn du noch neu in der Thematik bist. Versuch gleich unobtrusive javascript zu schreiben. Sprich keinerlei On Events im HTML und alles direkt über das JS zu steuern...ich schreib deinen Code gleich mal um, so wie ich das meine..steht dann im Edit.

// edit:
So, hier der Code: http://paste-it.net/public/xe51cda/

oder hier in direkt ohne Highlighting

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<script type="text/javascript">
	/* Hier stehen die Funktionen die wir nutzen wollen.
	 * Im Idealfall in einer eigenen Javascript Datei die wir einbinden wuerden.
	 */
	 
	// <![CDATA[
	
	// Tastatur Objekt
	Tastatur = function() { this.initialize.apply(this, arguments); };
	Tastatur.prototype = {
		eForm:		null,
		eAusgabe:	null,
		eFelder:	null,
		maxLength:	3,
		
		initialize: function(pForm, pAusgabe, pFeldTasten) {
			// formular über die ID holen und zuweisen.
			this.eForm = document.getElementById(pForm);
			
			if (this.eForm != null) {
				/* hier sollte man auch über ID gehen oder
				 * prüfen ob dieses Feldelement überhaupt existiert
				 */
				this.eAusgabe = this.eForm[pAusgabe];
				// in der Annahme das alles existiert...
				this.eFelder = document.getElementsByName(pFeldTasten);
				
				// onClick Events registrieren
				var _this = this;	// wir brauchen eine Referenz auf dieses Objekt...
				for (var i=0; i<this.eFelder.length; i++) {					
					this.eFelder[i].onclick = function(e) { _this.schreib(this, _this.eAusgabe); }
				}				
			}
		},

		schreib: function(objIn, objOut) {
			// auf Laenge pruefen
			if (objOut.value.length < this.maxLength)
				objOut.value += objIn.value;
		}		
	};
	// ]]>
	</script>
</head>
<body>
	<form id="formTastatur" method="post" action="tresor.php">
	<table style="background-color: silver; margin: 0 auto;">
		<tr>
			<td colspan="3">
				<input type="text" name="feldwerte" maxlength="4" size="3" readonly="readonly" />
			</td>
		</tr>
		<tr>
			<td><input name="feldTaste" type="button" value="1" /></td>
			<td><input name="feldTaste" type="button" value="2" /></td>
			<td><input name="feldTaste" type="button" value="3" /></td>
		</tr>
		<tr>
			<td><input name="feldTaste" type="button" value="4" /></td>
			<td><input name="feldTaste" type="button" value="5" /></td>
			<td><input name="feldTaste" type="button" value="6" /></td>
		</tr>
		<tr>
			<td><input name="feldTaste" type="button" value="7" /></td>
			<td><input name="feldTaste" type="button" value="8" /></td>
			<td><input name="feldTaste" type="button" value="9" /></td>
		</tr>
		<tr>
			<td></td>
			<td><input name="feldTaste" type="button" value="0" /></td>
			<td></td>
		</tr>
		<tr>
			<td colspan="3"><input type="reset" value="L&ouml;schen" /></td>
		</tr>
	</table>
	</form>
	
	<script type="text/javascript">
	// <![CDATA[
	var t = new Tastatur('formTastatur','feldwerte','feldTaste');
	// ]]>
	</script>
</body>
</html>

Der Vorteil hier ist das du gleich mehrere Tastatur Formulare machen kannst, wenn du willst und dazu lediglich eine neue Instanz des Objektes mit den jeweiligen Parametern übergeben musst.

Der erste Parameter ist die ID des Formulares. Der Zweite der Name des Ausgabefeldes und der Dritte legt den Namen der Tasten fest.

Hoffe das hilft dir weiter :)

Beitrag zuletzt geändert: 23.6.2009 10:19:40 von evil-devil

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city