Text nur anzeigen, wenn JS aktiviert

[chrisz]

Hi,
ich habe einen Input-Bereich, der nur angezeigt erden soll, wenn JS aktiviert ist. Wie könnte ich das anstellen? Sowas wie 'noscript' nur anders herum..
Grüße
Chriss

  
<input type="text" id="zaehler" name="Zaehler" value="400"></input>  

[EKKi]

Mahlzeit chrisz,

ich habe einen Input-Bereich, der nur angezeigt erden soll, wenn JS aktiviert ist. Wie könnte ich das anstellen? Sowas wie 'noscript' nur anders herum..

1. Möglichkeit: hänge das Formularelement mittels Javascript in den DOM-Baum ein.

2. Möglichkeit: lasse ein eigentlich unsichtbares Formularelement mittels Javascript wieder http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften@title=sichtbar werden.

MfG,
EKKi

[chrisz]

Mahlzeit chrisz,

2. Möglichkeit: lasse ein eigentlich unsichtbares Formularelement mittels Javascript wieder http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften@title=sichtbar werden.

Hi Ekki
du meinst mit display:none? Und wie macht man die Elemente mit JS wieder sichtbar?

[JürgenB]

Hallo chrisz,

du meinst mit display:none? Und wie macht man die Elemente mit JS wieder sichtbar?

z.B. mit document.getElementById("...").style.display=""

der leere String setzt auf den Defaultwert.

Alternativ kannst du die Elemente auch mit document.write erzeugen.

Gruß, Jürgen

[Cybaer]

Hi,

1. Möglichkeit: hänge das Formularelement mittels Javascript in den DOM-Baum ein.

Wobei man den IE-Bug bezügl. benanner Elemente berücksichten sollte, falls man via JS auf das benannte Element später zugreifen will (s. </archiv/2008/7/t174429/#m1145695>).

2. Möglichkeit: lasse ein eigentlich unsichtbares Formularelement mittels Javascript wieder http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften@title=sichtbar werden.

Macht von CSS abhängig, bzw. führt dadurch zu ggf. nicht erwarteten Ergebnissen.

Gruß, Cybaer

[Gunnar Bittersmann]

@@chrisz:

ich habe einen Input-Bereich, der nur angezeigt erden soll, wenn JS aktiviert ist. Wie könnte ich das anstellen? Sowas wie 'noscript' nur anders herum..

3. Möglichkeit: Gib einem Element (das Wurzelelement 'html' ist dafür prädestiniert) per JavaScript eine Klasse "js". Im 'head':

<script type="text/javascript">[code lang=javascript]document.documentElement.className += ” js”;</script>[/code]

Dann kannst du per Nachfahrenselektor versteckte Elemente wieder anzeigen lassen:

#zaehler  
{  
  display: none;  
}  
  
.js #zaehler  
{  
  display: inline;  
}

Live long and prosper,
Gunnar

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

Hallo Gunnar[tm],

Den Link zum Beitrag aus dem Webkrauts-Adventskalender 2008 wollte ich noch dazuliefern: Sehr sehr schnelle Seiten - Website Performance Best Practice - Teil 2

Live long and prosper,
Gunnar

[chriss]

Ich hab es mal so probiert, es klappt aber nicht. Hat sich vielleicht irgendwo ein Fehler eingeschlichen?

<script type="text/javascript">  
[code lang=javascript]  
document.documentElement.className += ” js”;

</script>[/code]

#zaehler {  
display: none;  
}  
  
.js #zaehler {  
display: inline;  
}

  
<input type="text" id="zaehler" name="Zaehler" value="400"></input>  

Der Input-Tag steht in einem Formular, kann das der Fehler sein?

Grüße Chriss

[Gunnar Bittersmann]

@@chriss:

Hat sich vielleicht irgendwo ein Fehler eingeschlichen?
document.documentElement.className += ” js”;

Ja, da haben mir Bonnie und Clyde einen Streich mit den Anführungszeichen gespielt.

<script type="text/javascript">[code lang=javascript]document.documentElement.className += " js";</script>[/code]
                                                                     ▲   ▲
Live long and prosper,
Gunnar

[Timo "God's Boss" Reitz]

3. Möglichkeit: Gib einem Element (das Wurzelelement 'html' ist dafür prädestiniert) per JavaScript eine Klasse "js". Im 'head':

<script type="text/javascript">[code lang=javascript]document.documentElement.className += ” js”;</script>[/code]

Dann kannst du per Nachfahrenselektor versteckte Elemente wieder anzeigen lassen:

#zaehler

{
  display: none;
}

.js #zaehler
{
  display: inline;
}

  
Was, wenn ein Client auch CSS nicht kennt?

-- 
Reden ist Silber, Schweigen ist Gold, meine Ausführungen sind Platin.  
  
Self-Code: sh:( ch:? rl:( br:> n4:( ie:{ mo:) va:) de:> zu:} fl:| ss:| ls:~ js:| 

[Gunnar Bittersmann]

@@Timo "God's Boss" Reitz:

Was, wenn ein Client auch CSS nicht kennt?

Dann wird der Inhalt ausgegeben. In den meisten Fällen ist das zwar unnütz, aber nicht tragisch.

Live long and prosper,
Gunnar

[Cybaer]

Hi,

<script type="text/javascript"><!--  
 document.write('<input type="text" id="zaehler" name="Zaehler" value="400"><\/input>');  
//--></script>

Gruß, Cybaer

[chrisz]

Hi,

<script type="text/javascript"><!--

document.write('<input type="text" id="zaehler" name="Zaehler" value="400"></input>');
//--></script>

>   

He, Danke, das klappt gut. Aber der INPUT-Tag ist jetzt nicht mehr innerhalb des Formulars, sodass der Zähler nicht mehr funktioniert. Wie bekomme ich diese Funktion wieder in das Formular?

[EKKi]

Mahlzeit chrisz,

He, Danke, das klappt gut. Aber der INPUT-Tag ist jetzt nicht mehr innerhalb des Formulars, sodass der Zähler nicht mehr funktioniert. Wie bekomme ich diese Funktion wieder in das Formular?

Indem Du den Javascript-Code dort hinschreibst, wo Du das <input>-Element haben willst.

MfG,
EKKi

[chrisz]

Indem Du den Javascript-Code dort hinschreibst, wo Du das <input>-Element haben willst.

Vielen Dank euch, das hat geklappt. Wieder was gelernt.
Grüße
Chriss

[chrisz]

Mahlzeit chrisz,

He, Danke, das klappt gut. Aber der INPUT-Tag ist jetzt nicht mehr innerhalb des Formulars, sodass der Zähler nicht mehr funktioniert. Wie bekomme ich diese Funktion wieder in das Formular?

Indem Du den Javascript-Code dort hinschreibst, wo Du das <input>-Element haben willst.

Zu früh gefreut. Im IE klappt das irgendwie nicht wie gewünscht. Es erscheint kein Text. Im Firefox hingegen alles ok. Muss man für den IE noch etwas anpassen?

[at]

Hallo.

Im IE klappt das irgendwie nicht wie gewünscht. [...] Muss man für den IE noch etwas anpassen?

Ja, deine Erwartungen.
MfG, at

[molily]

Wie bekomme ich diese Funktion wieder in das Formular?

Indem du das script-Element mit dem document.write-Aufruf an die Stelle im HTML-Dokument setzt, an der das input-Element eingefügt werden soll. So funktioniert document.write.

Mathias

[molily]

Übrigens:

<input type="text" id="zaehler" name="Zaehler" value="400"></input>

input ist ein leeres Element und hat keinen End-Tag. In HTML schreibt man schlicht <input>, in XHTML 1 schreibt sollte man <input /> schreiben. <input></input> ist in HTML 4 falsch und in XHTML 1 nicht empfohlen, wenn du HTML-kompatibles XHTML schreiben willst.

Mathias