kostenloser Webspace werbefrei: lima-city


JavaScript und Formularfelder

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    seth93

    seth93 hat kostenlosen Webspace.

    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.
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. c****s

    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");
    }
  4. e********l

    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
  5. 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

Login zum Webhosting ohne Werbung!