Hilfe - vorschau über java (eingabefelder auslesen)

P

phpMars

Erfahrenes Mitglied
Hallo,

ich möchte folgendes basteln.
Ich habe eine Tabelle mit 2 Spalten. In der einen Spalte ist ein Eingabefeld, die andere soll als vorschau dienen.
In das Eingabefeld sollen Farbwerte eingetragen werden, wie z.B. #000000 . Die andere Spalte soll dann diesen eingetragenen Wert zu seinem bgcolor machen, ohne diesen Wert erst zu speichern oder auf vorschau zu klicken.

Könnt ihr mir helfen
 
Hi,

Du könntest den onkeyup-Event des INPUT-Feldes während der Eingabe des Farbwertes
überwachen. Wurden sechs Zeichen eingegeben, versuchst Du den Hintergrund der Farbtabellenzelle
entsprechend zu ändern. Verursacht der Versuch einen Fehler, so wird eine Fehlermeldung ausgegeben.
Im anderen Fall wird die Hintergrundfarbe der Zelle entsprechend gesetzt.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="author" content="Quaese" />
<script type="text/javascript">
<!--
    function colorIt(objInput){
        // Falls sechs Zeichen eingegeben wurden
        if(objInput.value.length == 6){
            // Falls Farbwert gesetzt werden kann
            try{
                // Tabllenhintergrund auf eingegebenen Farbwert setzen
                document.getElementById('colorID').style.backgroundColor = "#"+objInput.value;
            }catch(e){
                alert("Keinen gültigen Farbwert eingegeben!");
            }
        }
    }
// -->
</script>
<style type="text/css">
<!--
body{ background: #ffffff;}
table{ border-top: 1px solid #808080;
       border-right: 1px solid #808080;}
table td{ border-bottom: 1px solid #808080;
          border-left: 1px solid #808080;
          padding: 5px;
          width: 70px;}
// -->
</style>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
    <table cellspacing="0">
        <tr>
            <td>#<input type="text" onkeyup="colorIt(this);" maxlength="6" size="6" value="" /></td>
            <td id="colorID">&nbsp;</td>
        </tr>
    </table>
</body>
</html>
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück