nicht angemeldet
Hallo zusammen!
Ich habe mehrere Textfelder und möchte, sobald sich in einem dieser Felder etwas tut, eine JavaScript-Funktion enableSave() aufrufen. Wenn ich den onChange-Event nehmen, bekomme ich Änderungen erst mit, wenn das Feld verlassen wurde, also verwende ich onKeyPress. Das klappt soweit auch.
Das Problem ist, dass der Benutzer auch mit Tab durch die Felder gehen kann. Dabei ändert er nichts, aber onKeyPress ruft trotzdem die enableSave()-Funktion auf. Wer kennt eine elegante Lösung für dieses Problem?
Danke!
Hi ! Du kannst mit event.keyCode jede taste abfangen und z.B. sagen wenn event.KeyCode ich glaube der keyCode für TAB ist 9 musste mal gucken! event.KeyCode(9);
Hallo,
das funktioniert nur beim IE. Ansonsten event.which oder event.Button.
Ausserdem funktioniert die keyCode-Abfrage der Sondertasten nicht bei allen Tastaturen (IE MAC /IE WIN NT auf non-Intel-PCs / Windows 95/98 mit AT-Tastatur). Die Abfrage von ENTER oder eines Buchstabens ist daher sinnvoll.
Sicher wäre aber der komplette Code hilfreich, weil ja sonst nur Spekulaties rauskommen, aber keine guten Kekse.
Du kannst mit einem Schalter absichern, z.B. onchange="fertig=true"
onfocus="verlassen=false" onblur="verlassen=true" in den Input-Tags.
onKeyPress="(fertig==true&&verlassen=true)?enableSave():alert('Fehler: Speichern fehlgeschlagen - bitte einen Wert eingeben');"
Aber bitte poste mal den Code oder mail den mir..
Oder vergleiche mit diesem hier:
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<meta name="author" content="Original:http://www.einfach-fuer-alle.de DHTML-Changes: Michael Meister (MichelM) http://www.iaweb.org Weitergabe ausdrücklich erlaubt">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<title>
</title>
<script type=text/javascript language=javascript>
var namefocus=false;mailfocus=false;var strfocus=false;var ortfocus=false; </script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<style type="text/css" media="Screen">
<!-- body{font-family:Verdana,Tahoma,Helvetica,Arial,sans-serif;}
fieldset { border: 1px #666 solid; background: #dfdff2; width:40%;}
legend { font-weight: bold; background: Wheat;border:ridge 1px Blue;padding:6px;}
label { border: #6699CC dotted; border-width: 0 0 1px 0; cursor: pointer;}
input#submitter { background: #eee; margin: .4em;color:black;cursor:Hand;}
input, textarea { background: #eee; margin: .4em;}
legend, label { font: .8em/130% sans-serif; color: #000;}
span#text {position:relative;top:-10px;left:4px; font: .7em/110% sans-serif; color: #000;text-align:center;width:200px; background: #DFDFFF;border:ridge 1px blue;}
.acc { border: #000 solid; border-width: 0px 0px 2px; font-weight: normal;font-size:1.7em/170%; color: #333399;}
-->
</style>
Und hier der erweiterte DHTML-Code für das eigentliche Formular: <form action="foo.pl" target=_blank>
<!-- action=window.open("foo.pl","foo","width=200px,height=200px")-->
<fieldset>
<legend>
Beispielformular</legend>
<table cellpadding="3" cellspacing="10" border="0" >
<tr>
<td>
<a>
<label for="name" accesskey="n" ONMOUSEOVER="this.style.background='Wheat'" ONMOUSEOUT="this.style.background='transparent'">
<span class="acc">
N</span>
ame: </label>
</a>
</td>
<td>
<input id="name" type=text size="30" tabindex="1" ONMOUSEOVER="if (namefocus==false){ this.style.background='Wheat';}
else {this.style.background='White';}
" onfocus="namefocus=true;this.style.background='White';" onblur="namefocus=false;this.style.background='#eee'" ONMOUSEOUT="if(namefocus==false){this.style.background='#eee';}
else {this.style.background='White'}
">
</td>
</tr>
<tr>
<td>
<label for="strasse" accesskey="s" ONMOUSEOVER="this.style.background='Wheat'" ONMOUSEOUT="this.style.background='transparent'">
<span class="acc">
S</span>
traße </label>
</td>
<td>
<input id="strasse" type=text size="30" tabindex="2" ONMOUSEOVER="if (strfocus==false){ this.style.background='Wheat';}
else {this.style.background='White';}
" onfocus="strfocus=true;this.style.background='White';" onblur="strfocus=false;this.style.background='#eee'" ONMOUSEOUT="if(strfocus==false){this.style.background='#eee';}
else {this.style.background='White'}
">
</td>
</tr>
<tr>
<td>
<label for="ort" accesskey="o" ONMOUSEOVER="this.style.background='Wheat'" ONMOUSEOUT="this.style.background='transparent'">
<span class="acc">
O</span>
rt</label>
</td>
<td>
<input id="ort" type=text size="30" tabindex="3" ONMOUSEOVER="if (ortfocus==false){ this.style.background='Wheat';}
else {this.style.background='White';}
" onfocus="ortfocus=true;this.style.background='White';" onblur="ortfocus=false;this.style.background='#eee'" ONMOUSEOUT="if(ortfocus==false){this.style.background='#eee';}
else {this.style.background='White'}
">
</td>
</tr>
<tr>
<td>
<label for="email" accesskey="e" ONMOUSEOVER="this.style.background='Wheat'" ONMOUSEOUT="this.style.background='transparent'">
<span class="acc">
E</span>
-Mail</label>
</td>
<td>
<input id="email" type=text size="30" value="@" title="zum Pruefen einfach die Checkbox Pruefen anklicken" tabindex="4" ONMOUSEOVER="if (mailfocus==false){ this.style.background='Wheat';}
else {this.style.background='White';}
" onfocus="mailfocus=true;this.style.background='White';" onblur="mailfocus=false;this.style.background='#eee'" ONMOUSEOUT="if(mailfocus==false){this.style.background='#eee';}
else {this.style.background='White'}
">
<td>
<label for="pruefen" accesskey="p" ONMOUSEOVER="this.style.background='Wheat'" ONMOUSEOUT="this.style.background='transparent'">
<span class="acc">
P</span>
ruefen</label>
</td>
<td>
<input id="pruefen" type="checkbox" value="pruefen" tabindex="5" ONMOUSEOVER="this.style.background='Wheat'" ONMOUSEOUT="this.style.background='transparent'">
</td>
</td>
</tr>
<tr>
<td>
<label for="ja" accesskey="w" ONMOUSEOVER="this.style.background='Wheat'" ONMOUSEOUT="this.style.background='transparent'">
Ent<span class="acc">
w</span>
eder</label>
</td>
<td>
<input id="ja" type="radio" name="rb" value="ja" tabindex="6" ONMOUSEOVER="this.style.background='Wheat'" ONMOUSEOUT="this.style.background='transparent'">
</td>
</tr>
<tr>
<td>
<label for="nein" accesskey="d" ONMOUSEOVER="this.style.background='Wheat'" ONMOUSEOUT="this.style.background='transparent'">
O<span class="acc">
d</span>
er</label>
</td>
<td>
<input id="nein" type="radio" name="rb" value="nein" tabindex="7" ONMOUSEOVER="this.style.background='Wheat'" ONMOUSEOUT="this.style.background='transparent'">
</td>
</tr>
<tr>
<td>
<label for="doch" accesskey="c" ONMOUSEOVER="this.style.background='Wheat'" ONMOUSEOUT="this.style.background='transparent'">
Spei<span class="acc">
c</span>
hern</label>
</td>
<td>
<input id="doch" type="checkbox" value="sichern" tabindex="8" ONMOUSEOVER="this.style.background='Wheat'" ONMOUSEOUT="this.style.background='#eee'">
<span id=text>
nach jeder Eingabe speichern </span>
</td>
</tr>
<tr>
<td align=top>
<label for="oder" accesskey="a" ONMOUSEOVER="this.style.background='Wheat'" ONMOUSEOUT="this.style.background='none';">
<span class="acc">
A</span>
Copy</label>
</td>
<td >
<input id="oder" type="checkbox" value="alsauch" tabindex="9" ONMOUSEOVER="this.style.background='Wheat'" ONMOUSEOUT="this.style.background='#eee';">
<span id=text>
Kopie an Absender senden </span>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" id=submitter value="Absenden" title="hier klicken oder Taste drücken für Aufruf des Mailprogramms" tabindex="10" style="font:0.8em Chicago, MS Sans Serif" ONMOUSEOVER=this.style.background="Wheat";this.style.color="blue"; ONMOUSEOUT=this.style.background="#eee";this.style.color="black">
<input type="reset" id=submitter value="Löschen" title="hiermit löschen Sie alle Eingaben unwiderruflich" tabindex="11" style="font: .8em Chicago, MS Sans Serif" ONMOUSEOVER=this.style.background="Wheat";this.style.color="blue"; ONMOUSEOUT=this.style.background="#eee";this.style.color="black">
</td>
<td align=left>
<input type="button" id=submitter value="Save" title="dieses Formular sichern/speichern" tabindex="12" style="font: .8em Chicago, MS Sans Serif" ONMOUSEOVER=this.style.background="Wheat";this.style.color="blue"; ONMOUSEOUT=this.style.background="#eee";this.style.color="black">
</td>
<td>
</td>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>