css-class eines input-feld onchange ändern
nina
- css
0 Bio0 Axel Richter0 nina
0 Bio0 nina0 Axel Richter0 nina
hallo forum,
habe schon mehrere lösungsansätze aus selfhtml und dem forum probiert, ergebnis unbefriedigend.
ich habe ein formular, in dem ich eine reihe von input-feldern disable, jenachdem ob eine checkbox aktiviert ist oder nicht (lieferdaresse).
klappt soweit auch ganz gut. ich habe meine input-felder mit css formatiert (input.eingabe), und ich möchte, dass die felder auch so aussehen, als könnte man keine eingabe mehr machen. leider greift input[disabled] bzw. input[disabled].eingabe nicht, zumindest nicht mit meinem browser (IE 6.0), und ich suche eine lösung, die so weitgreifend wie möglich funktioniert. nun habe ich mir überlegt, ich ändere die class mit javascript von eingabe nach eingabe2.
das schlägt aber erst an, wenn ich versuche, den cursor in das feld zu setzen.
also dachte ich, ich lasse den cursor direkt mit dem skript automatisch setzen, mit focus. klappt aber auch nicht.
hier mein skript, vielleicht weiss jemand rat:
function enable()
{
if (bestellForm.lcheck.checked)
{
bestellForm.U_LNAME.disabled = false;
bestellForm.U_LVORNAME.disabled = false;
bestellForm.U_LSTRASSE.disabled = false;
bestellForm.U_LORT.disabled = false;
bestellForm.U_LPLZ.disabled = false;
bestellForm.U_LFIRMA.disabled = false;
bestellForm.U_LNAME.className = "eingabe";
bestellForm.U_LVORNAME.className = "eingabe";
bestellForm.U_LSTRASSE.className = "eingabe";
bestellForm.U_LORT.className = "eingabe";
bestellForm.U_LPLZ.className = "eingabe";
bestellForm.U_LFIRMA.className = "eingabe";
bestellForm.U_LNAME.focus();
}
else
{
bestellForm.U_LNAME.disabled = true;
bestellForm.U_LVORNAME.disabled = true;
bestellForm.U_LSTRASSE.disabled = true;
bestellForm.U_LORT.disabled = true;
bestellForm.U_LPLZ.disabled = true;
bestellForm.U_LFIRMA.disabled = true;
bestellForm.U_LNAME.className = "eingabe2";
bestellForm.U_LVORNAME.className = "eingabe2";
bestellForm.U_LSTRASSE.className = "eingabe2";
bestellForm.U_LORT.className = "eingabe2";
bestellForm.U_LPLZ.className = "eingabe2";
bestellForm.U_LFIRMA.className = "eingabe2";
bestellForm.U_LNAME.focus();
}
}
und auf der checkbox onChange="enable();"
danke vorab, nina
Sup!
klappt soweit auch ganz gut. ich habe meine input-felder mit css formatiert (input.eingabe), und ich möchte, dass die felder auch so aussehen, als könnte man keine eingabe mehr machen. leider greift input[disabled] bzw. input[disabled].eingabe nicht, zumindest nicht mit meinem browser (IE 6.0)
Was soll denn input[disabled] bitte fuer eine Syntax sein?
, und ich suche eine lösung, die so weitgreifend wie möglich funktioniert. nun habe ich mir überlegt, ich ändere die class mit javascript von eingabe nach eingabe2.
Was mich zur Frage bringt, wo denn da bitte irgendeine Class steht in Deinem Quellcode.
also dachte ich, ich lasse den cursor direkt mit dem skript automatisch setzen, mit focus. klappt aber auch nicht.
Vielleicht mit .focus()?
danke vorab, nina
Bedank' Dich lieber erst nachher ;-)
Gruesse,
Bio
Hallo,
klappt soweit auch ganz gut. ich habe meine input-felder mit css formatiert (input.eingabe), und ich möchte, dass die felder auch so aussehen, als könnte man keine eingabe mehr machen. leider greift input[disabled] bzw. input[disabled].eingabe nicht, zumindest nicht mit meinem browser (IE 6.0)
Was soll denn input[disabled] bitte fuer eine Syntax sein?
CSS2. Das nennt sich Attribute selector.
http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors
viele Grüße
Axel
Was mich zur Frage bringt, wo denn da bitte irgendeine Class steht in Deinem Quellcode.
den kram wollte ich eigentlich der übersichtlichkeit halber vermeiden, aber du hast es nicht anders gewollt :)
<table width="370" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="normal" valign="top" colspan="2">
<input type="text" name="U_LVORNAME" size="20" class="eingabe" value="[U_LVORNAME]" tabindex="9" disabled="disabled">
</td>
<td width="196" class="normal" valign="top">
<input type="text" name="U_LSTRASSE" size="20" class="eingabe" value="[U_LSTRASSE]" tabindex="12" disabled="disabled">
</td>
</tr>
<tr>
<td class="normal" height="30" valign="top" colspan="2"><font color="#000001" class="normal">V</font><font color="#000000" class="normal"><font color="#000001">ORNAME</font></font></td>
<td width="196" class="normal" height="30" valign="top"><font color="#000000" class="normal">
</font><font color="#000000">STRASSE</font></td>
</tr>
<tr>
<td class="normal" valign="top" colspan="2">
<input type="text" name="U_LNAME" size="20" class="eingabe" value="[U_LNAME]" tabindex="10" disabled="disabled">
</td>
<td width="196" class="normal" valign="top"><font color="#000000">
<input type="text" name="U_LPLZ" size="5" class="eingabe" maxlength="5" value="[U_LPLZ]" tabindex="13" disabled="disabled">
, </font>
<input type="text" name="U_LORT" size="7" class="eingabe" value="[U_LORT]" tabindex="14" disabled="disabled">
</td>
</tr>
<tr>
<td class="normal" height="30" valign="top" colspan="2"><font color="#000000">NAME</font></td>
<td width="196" class="normal" height="30" valign="top"><font color="#000000">PLZ,
WOHNORT</font></td>
</tr>
<tr>
<td class="normal" height="30" valign="top" colspan="2">
<input type="text" name="U_LFIRMA" size="20" class="eingabe" value="[U_LFIRMA]" tabindex="11" disabled="disabled">
</td>
<td width="196" class="normal" height="30" valign="top"> </td>
</tr>
<tr>
<td class="normal" height="30" valign="top" colspan="2"><font color="#000000">FIRMA</font></td>
<td width="196" class="normal" height="30" valign="top"> </td>
</tr>
</table>
» Vielleicht mit .focus()?
ist das
bestellForm.U_LNAME.focus();
kein .focus(); ?
Sup!
Im Mozilla geht folgendes:
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<form name="myform">
<input name="myinput" type="text" value="test">
<input type="button" onClick="document.myform.myinput.disabled=true;" value="toggle1">
<input type="button" onClick="document.myform.myinput.disabled=false;" value="toggle2">
</form>
</body>
</html>
test.css:
input {background-color:red;}
input[disabled] {background-color:black;}
ganz grossartig. Wenn der IE das nicht rafft... Microsoft halt!
Gruesse,
Bio
:(
hmm...
hat denn jemand von euch eine ahnung, warum der focus nicht anschlägt? wenn das nur beim deaktivieren der checkbox wäre, ok, aber beim aktivieren muss er mir den cursor doch reinsetzen...
grüße, nina
Hallo,
hat denn jemand von euch eine ahnung, warum der focus nicht anschlägt? wenn das nur beim deaktivieren der checkbox wäre, ok, aber beim aktivieren muss er mir den cursor doch reinsetzen...
Macht er bestimmt auch. Aber das Hineinklicken mit der Maus ist nicht identisch mit der Methode .focus().
Da Du JavaScript ohnehin brauchst, würde ich die Style-Angaben auch dort verändern. Dann brauchst Du die Classen nicht tauschen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Textfelder</title>
<script type="text/javascript">
<!--
function einaus(chkbx){
var alleelemente=document.myform.elements;
for (var i = 0; i<alleelemente.length; i++) {
if (alleelemente[i].type == "text") {
if (chkbx.checked) {
alleelemente[i].disabled = false;
alleelemente[i].style.backgroundColor = "#FFF";
} else {
alleelemente[i].disabled = true;
alleelemente[i].style.backgroundColor = "#888";
}
}
}
}
//-->
</script>
</head>
<body >
<form action="#" method="POST" name="myform">
<input class="txtf" type="text" name="txt1" value="" size="50" maxlength="50"><br>
<input class="txtf" type="text" name="txt2" value="" size="50" maxlength="50"><br>
<input class="txtf" type="text" name="txt3" value="" size="50" maxlength="50"><br>
Textfelder aktiv: <input type="checkbox" name="aktiv" value="akt" onclick="einaus(this);">
</form>
</body>
</html>
viele Grüße
Axel
hallo axel,
Da Du JavaScript ohnehin brauchst, würde ich die Style-Angaben auch dort verändern. Dann brauchst Du die Classen nicht tauschen.
werde ich mal ausprobieren, schonmal vielen dank für die hilfe.
liebe grüße, nina