Kästchen nach Eingabe färben

Icy · 16 Januar 2008

Vorweg: Ich habe absolut 0 Ahnung von Javascript, denke aber, dass mein Problem nur mit JS zu lösen ist.

Also:
Ich habe ein Textfeld, in das ich eine Textfarbe eintrage (zB #464646). Rechts daneben habe ich ein kleines Kästchen, das immer die Farbe annehmen soll, die ich gerade ins Textfeld eingegeben habe.
Das gibts bspw. in der Designpackbearbeitung im Woltlab Burning Board.

Vllt kann mir ja wer helfen :)

MfG Icy

Frank · 16 Januar 2008

ist eigentlich ganz einfach
JavaScript

Code:

<script type="text/JavaScript">
<!--
function encolor(get,put) {
  color = get.value
  if (color[0] == "#" && (color.length == 4 || color.length == 7))
    document.getElementById(put).style.backgroundColor = color
  else (color.length == 3 || color.length == 6)
    document.getElementById(put).style.backgroundColor = "#"+color
}
-->
</script>

HTML

Code:

<input type="text name="farbe1" value="#" maxlength="7" onkeyup="encolor(this,'farbe1')" onkeydown="encolor(this,'farbe1')">
<br /><br />
<div id="farbe1" style="width:20px;height:20px;border:1px solid black;">&nbsp;</div>

Icy · 18 Januar 2008

Danke!

Und wie bekomme ich es hin, dass die Kästchen standardmäßig gefärbt sind? Also dass man nicht erst das Textfeld anklicken muss.

MfG Icy

threadi · 18 Januar 2008

Per CSS:

Code:

input { background-color: #ff0000; }

Icy · 18 Januar 2008

Ja aber die sollen ja in der Farbe gefärbt sein, die im Textfeld steht!

MfG Icy

threadi · 18 Januar 2008

Dann nimm die Funktion oben und setz sie on

Code:

<body onload="encolor('feldname1','feldname2');">

Kästchen nach Eingabe färben

Icy

Neues Mitglied

Frank

Neues Mitglied

Icy

Neues Mitglied

threadi

Moderator

Icy

Neues Mitglied

threadi

Moderator

Neueste Beiträge