nicht angemeldet
Eingabefeld beim Anklicken löschen
1 
Struppi
Eingabefeld beim Anklicken löschen
Hallo zusammen,
ich habe in meinem HTML Code 3 Bereiche mit je 2 Eingabefeldern, wobei immer nur 1 Bereich angezeigt wird. Über Links kann man die anderen Bereiche einblenden.
Jetzt soll beim Anklicken der Eingabefelder des sichtbaren Bereichs der vorbelegte Text gelöscht werden. Das Ganze passiert mit Javascript indem ich das Attribut 'Value' auf '' setze!
Klicke ich zuerst die Textfelder aus dem Bereich 1 an, dann 2 und dann 3, dann klappt auch alles wie gewünscht.
Fange ich mit den Feldern aus Bereich 3 an, dann 2 und dann 1, dann werden die Felder vom Bereich 1 nicht gelöscht. Ich lasse mir immer per Alert den value ausgeben, klicke ich erneut die Felder von Bereich 1 an, dann zeigt mir der Browser als value auch '' an, allerdings steht der Text immer noch im Eingabefeld.
Ich hoffe Ihr habt mein Problem verstanden, ist etwas kompliziert zu beschreiben.
Kann mir jemand helfen?
Liebe Grüße,
Katharina
HTML Code:
<html>
<head>
<title>Test</title>
</head>
<body>
<script language="javascript">
function deleteDefaultValues(id)
{
var textfield = document.getElementById(id);
alert("_"+textfield.getAttribute("value")+"_");
if ((textfield.getAttribute("value") == "Suchbegriff")) {
textfield.setAttribute("value","");
}
if ((textfield.getAttribute("value") == "PLZ")) {
textfield.setAttribute("value","");
}
}
function show(id)
{
var num = 3;
for (counter = 1; counter <= num; counter++){
var tmpId = 'content'+counter;
var tmpObj = document.getElementById(tmpId);
if (tmpId != id){
tmpObj.setAttribute('style', 'display:none');
}else{
tmpObj.setAttribute('style', 'display:block');
}
}
}
</script>
<a href="javascript:show('content1')">1 anzeigen</a>
</br>
<a href="javascript:show('content2')">2 anzeigen</a>
</br>
<a href="javascript:show('content3')">3 anzeigen</a>
<div id="content1" style="display:block">
<form action="www.test.de" method="_get" target="_blank">
<input type="text" value="Suchbegriff" id="content1_1" onclick="deleteDefaultValues('content1_1')"/>
</br>
<input type="text" value="PLZ" id="content1_2" onclick="deleteDefaultValues('content1_2')"/>
</br>
<input type="submit" value="senden" id="content1_3"/>
</form>
<p>1</p>
</div>
<div id="content2" style="display:none">
<form action="www.test.de" method="_get" target="_blank">
<input type="text" value="Suchbegriff" id="content2_1" onclick="deleteDefaultValues('content2_1')"/>
</br>
<input type="text" value="PLZ" id="content2_2" onclick="deleteDefaultValues('content2_2')"/>
</br>
<input type="submit" value="senden" id="content2_3"/>
</form>
<p>2</p>
</div>
<div id="content3" style="display:none">
<form action="www.test.de" method="_get" target="_blank">
<input type="text" value="Suchbegriff" id="content3_1" onclick="deleteDefaultValues('content3_1')"/>
</br>
<input type="text" value="PLZ" id="content3_2" onclick="deleteDefaultValues('content3_2')"/>
</br>
<input type="submit" value="senden" id="content3_3"/>
</form>
<p>3</p>
</div>
</body>
</html>
-
Jetzt soll beim Anklicken der Eingabefelder des sichtbaren Bereichs der vorbelegte Text gelöscht werden. Das Ganze passiert mit Javascript indem ich das Attribut 'Value' auf '' setze!
Du meinst sowas:
<input value="Suchbegriff"
onclick="if(this.value == this.defaultValue) this.value = '';"
onblur="if(!this.value) this.value = this.defaultValue;"<script language="javascript">
Hier fehlt das type Attribut, das language Attribut dagegen ist überflüssig.
function deleteDefaultValues(id)
{
var textfield = document.getElementById(id);
alert("_"+textfield.getAttribute("value")+"_");
if ((textfield.getAttribute("value") == "Suchbegriff")) {
textfield.setAttribute("value","");
}
if ((textfield.getAttribute("value") == "PLZ")) {
textfield.setAttribute("value","");set- und getAttribute sind in dem Falle nicht nötig, du kannst Problemlos per objekt.attribute Werte auslesene und ändern.
Struppi.
--
Javascript ist toll (Perl auch!)-
Jetzt soll beim Anklicken der Eingabefelder des sichtbaren Bereichs der vorbelegte Text gelöscht werden. Das Ganze passiert mit Javascript indem ich das Attribut 'Value' auf '' setze!
Du meinst sowas:
<input value="Suchbegriff"
onclick="if(this.value == this.defaultValue) this.value = '';"
onblur="if(!this.value) this.value = this.defaultValue;"<script language="javascript">
Hier fehlt das type Attribut, das language Attribut dagegen ist überflüssig.
function deleteDefaultValues(id)
{
var textfield = document.getElementById(id);
alert("_"+textfield.getAttribute("value")+"_");
if ((textfield.getAttribute("value") == "Suchbegriff")) {
textfield.setAttribute("value","");
}
if ((textfield.getAttribute("value") == "PLZ")) {
textfield.setAttribute("value","");set- und getAttribute sind in dem Falle nicht nötig, du kannst Problemlos per objekt.attribute Werte auslesene und ändern.
Struppi.
Ups! Das mit dem type Attribute war ein kleiner Fehler!!! Habe es jetzt geändert, aber es klappt trotzdem nicht. Wer weiß warum?
Katharina
-
Jetzt soll beim Anklicken der Eingabefelder des sichtbaren Bereichs der vorbelegte Text gelöscht werden. Das Ganze passiert mit Javascript indem ich das Attribut 'Value' auf '' setze!
Du meinst sowas:
<input value="Suchbegriff"
onclick="if(this.value == this.defaultValue) this.value = '';"
onblur="if(!this.value) this.value = this.defaultValue;"Hallo Struppi,
bei Deinem Beispiel oben werden allerdings alle Eingabefelder von allen Bereichen gelöscht. Es soll nur das Eingabefeld gelöscht werden, das ich angeklick habe.
Der neue Code:
<html>
<head>
<title>Test</title>
</head>
<body><a href="javascript:show('content1')">1 anzeigen</a>
</br>
<a href="javascript:show('content2')">2 anzeigen</a>
</br>
<a href="javascript:show('content3')">3 anzeigen</a><div id="content1" style="display:block">
<form action="www.test.de" method="_get" target="_blank">
<!--<input type="text" value="Suchbegriff" id="content1_1" onclick="deleteDefaultValues('content1_1')"/>-->
<input type="text" value="Suchbegriff" id="content1_1" onclick="if(this.value == this.defaultValue) this.value = '';"/></br>
<input type="text" value="PLZ" id="content1_2" onclick="if(this.value == this.defaultValue) this.value = '';"/>
</br>
<input type="submit" value="senden" id="content1_3"/>
</form>
<p>1</p>
</div><div id="content2" style="display:none">
<form action="www.test.de" method="_get" target="_blank">
<input type="text" value="Suchbegriff" id="content2_1" " onclick="if(this.value == this.defaultValue) this.value = '';"/>
</br>
<input type="text" value="PLZ" id="content2_2" onclick="if(this.value == this.defaultValue) this.value = '';"/>
</br>
<input type="submit" value="senden" id="content2_3"/>
</form>
<p>2</p>
</div><div id="content3" style="display:none">
<form action="www.test.de" method="_get" target="_blank">
<input type="text" value="Suchbegriff" id="content3_1" onclick="if(this.value == this.defaultValue) this.value = '';"/>
</br>
<input type="text" value="PLZ" id="content3_2"/>
</br>
<input type="submit" value="senden" id="content3_3"/>
</form>
<p>3</p>
</div>
</body>
</html> -
Sorry für die vielen Postings hier, Problem hat sich mit Struppies Vorschlag erledigt!!!
-