Vorgabewert von Formular-Textfeld anders formatieren

[Tanja]

Hallo zusammen

Ich bastle gerade an einem Formular herum... Nun möchte ich gern erreichen, dass der Vorgabewert eines Textfelds teilweise anders formatiert wird, als der Text, den der Benutzer danach in dieses Textfeld eingibt.

Sagen wir mal, der Vorgabewert ist: "Suche: Name, Adresse, Telefon". Das Wort "Suche:" soll dabei fett und in einer anderen Farbe formatiert sein, als "Name, Adresse, Telefon". Wenn der Benutzer danach etwas in dieses Feld eingibt, soll die Formatierung gleich sein, wie "Name, Adresse, Telefon".

Mein Textfeld sieht erst mal so aus:

<input name="search" type="text" id="search" class="textSearch" value="Suche: Name, Adresse, Telefon" />

Nachdem ich lange erfolglos nach einer Lösung gesucht habe, wäre ich sehr froh für einen Tipp!

Herzlichen Dank und LG
Tanja

[MudGuard]

Hi,

Sagen wir mal, der Vorgabewert ist: "Suche: Name, Adresse, Telefon". Das Wort "Suche:" soll dabei fett und in einer anderen Farbe formatiert sein,

Mein Textfeld sieht erst mal so aus:
<input name="search" type="text" id="search" class="textSearch" value="Suche: Name, Adresse, Telefon" />

Das ist m.W. nicht möglich.
Wenn es überhaupt eine Change gibt, den Inhalt eines input nicht-einheitlich darzustellen, sind das:
:first-letter für den ersten Buchstaben
(:first-line hilft ja nicht, da der Inhalt ja nur eine Zeile ist)
:before (also Suche:) als content von :before benutzen. (Das klappt aber im IE nicht, der ist zu rückständig für :before)
:after (s. :before)

cu,
Andreas

[romy]

Hi Tanja,

Ich bastle gerade an einem Formular herum... Nun möchte ich gern erreichen, dass der Vorgabewert eines Textfelds teilweise anders formatiert wird, als der Text, den der Benutzer danach in dieses Textfeld eingibt.

Das einzige was mir dazu einfällt, wäre mit Javascript die Formatierung zu ändern, wenn das Textfeld verändert wird.

ciao
romy

[Tanja]

Hallo MudGuard und romy

Vielen Dank für Eure Antworten.

MudGuard: Ich hab's bis jetzt leider nicht hinbekommen. Ich hab's mal so versucht:

.test:before {
   content: "Suche: ";
   color: #009900;
}

<input name="search" type="text" id="search" class="test" value="Name, Adresse, Telefon" />

Klappt aber leider nicht (auch nicht in FF). Wenn ich die Klasse "test" einem normalen Absatz zuordne, funktioniert's. Aber leider nicht im Formularfeld...

romy: Ja, das hab ich mir auch schon gedacht. Hab aber leider keinen Schimmer, wie das gehen soll.

Hat sonst noch jemand einen Tipp?

Vielen Dank und LG
Tanja

[MudGuard]

Hi,

MudGuard: Ich hab's bis jetzt leider nicht hinbekommen. Ich hab's mal so versucht:

.test:before {
   content: "Suche: ";
   color: #009900;
}

Ja, hab da was übersehen. :before wird vor dem content des Elementes ausgegeben. input hat aber per definitionem keinen content.
Mit :before/:after kann es also auch nicht klappen.

Ich sehe keine Chance für Dein Vorhaben.

cu,
Andreas

[Tanja]

Hi Andreas

sehe keine Chance für Dein Vorhaben.

Schade :-(

Aber trotzdem danke!

LG, Tanja

[Sven Rautenberg]

Moin!

.test:before {
   content: "Suche: ";
   color: #009900;
}

Ja, hab da was übersehen. :before wird vor dem content des Elementes ausgegeben. input hat aber per definitionem keinen content.

:before und :after soll man sich als randständiges <span> so vorstellen:

<element>span:before...</span:before>Elementinhaltspan:after...</span:after></element>

Mit :before/:after kann es also auch nicht klappen.

Das ändert aber daran auch nichts. Formularelemente haben nach derzeitigem Stand der Dinge für ihren Inhalt nur genau eine einheitliche Formatierung. Es ist nicht vorgesehen, z.B. innerhalb eines Text-Inputs sowohl Fett- als auch Normalschrift auszugeben.

Die Browser kriegen es ja teilweise noch nicht mal hin, Formularelemente überhaupt formatieren zu können - und wenn, dann nur nervig unterschiedlich.

- Sven Rautenberg

[romy]

Hi Tanja,

romy: Ja, das hab ich mir auch schon gedacht. Hab aber leider keinen Schimmer, wie das gehen soll.

Ich weiß es nicht genau, aber schau mal hier in die Events, die es gibt bzw. habe ich diesen Codeschnipsel gefunden, der was du willst bei einem anderen Beispiel ganz gut zeigt:

  
<html><head><title>Test</title>  
<style type="text/css">  
.normal { font-size:160%; color:blue; }  
.extra { font-size:160%; color:red; background-color:yellow; }  
</style>  
<script type="text/javascript">  
function wechseln () {  
  if (document.getElementById("stark").className == "normal") {  
    document.getElementById("stark").className = "extra";  
  } else {  
    document.getElementById("stark").className = "normal";  
  }  
}  
</script>  
</head><body>  
<p><strong id="stark" class="normal" onmouseover="wechseln()" onmouseout="wechseln()">ganz stark!</strong></p>  
</body></html>  

Ich habe es nicht verlinkt, weil ich es zufällig zu der Doku zu Strong gefunden habe und das ja nichts damit zu tun hat. Aber der Code wertet auch ein Ereignis aus und ändert einen css-style (in diesem Falle einfach die verwendete Klasse)

Hilft dir das weiter?

ciao
romy

[Tanja]

Hi romy

Vielen Dank! Ich werd das heute Abend ausprobieren.

LG, Tanja

[Maxx]

Hallo Tanja,

Nun möchte ich gern erreichen, dass der Vorgabewert eines Textfelds teilweise anders formatiert wird, als der Text, den der Benutzer danach in dieses Textfeld eingibt.
Sagen wir mal, der Vorgabewert ist: "Suche: Name, Adresse, Telefon".

du könntest das "Suche" so formatieren, das es aussieht als ob es Bestandteil des Eingabefeldes ist. Und dann im onfocus "Suche" umformatieren.

Ich halte das aber für verwirrend und ob der Aufwand wirklich lohnt?

Grüße,

Jochen