PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : readonly - Ändern per JS


volti
03.10.2004, 21:07:14
Hallo Leute,
zu folgendem Prob fällt mir leider gerade keine Lösung ein:

Ich habe in einer Tabelle viele <input>-Felder für die Aufnahme von Zahlen definiert und diese zunächt alle 'readonly', also nicht änderbar geschaltet.

Über eine DropDown-Box wird nun eine Funktion angesteuert, mit der einige der Felder für die Eingabe freigeschaltet und andere eben ausgeschaltet werden sollen. Hierbei ist die id der jeweiligen <input>-Felder bekannt.

Wie kann ich Hintergrundfarbe, aber vor allem die readonly-Eigenschaft der <input>-Felder per JS am besten ändern?

Hat da jemand 'nen Tipp?

z.B.
id.readonly=false; oder
id.style.readonly=false; oder
id.type='text readonly' bzw. id.type='text' funktionieren schon mal nicht.

xabbuh
03.10.2004, 21:33:18
Readonly lässt sich per JavaScript, glaube ich, nicht ein- und ausschalten. Du könntest allerdings die Formularfelder zunächst ausgrauen (disablen) (http://de.selfhtml.org/html/formulare/tastatur.htm#elemente_ausgrauen).
Mit JavaScript geht das folgendermaßen:

document.formular.element.disabled = true;
// bzw.
document.formular.element.disabled = false;


Den Hintergrund änderst du so:

document.formular.element.style.backgroundColor = '#ffffff';

volti
03.10.2004, 21:49:01
Hallo xabbuh,
schade, aber werde Deinen Vorschlag mal ausprobieren.

Ja, und beim Hintergrund (schäm) habe ich immer ein kleines c (backgroundcolor) geschrieben; lag wohl daran. JS ist halt empfindlich.

Danke.

xabbuh
03.10.2004, 22:19:31
Du könntest sonst noch document.formular.element.readonly = true ausprobieren. Ich glaube aber nicht, dass das funktioniert.

Oder aber du definierst jedes Eingabefeld doppelt. Einmal mit der Eigenschaft readonly und einmal ohne. Und per JavaScript änderst du dann immer, welches von beiden Eingabefeldern sichtbar sein soll.

volti
04.10.2004, 19:40:17
Hallo xabbuh,
erstere Version hatte ich ja schon als nicht funktionierend aufgeführt.

Dein zweiter Vorschlag ist nicht so gut, weil ich
sehr viele Eingabefelder habe, die dann alle per <form>-tag übergeben werden und dann ausgewertet werden.

Wäre wirklich der allerletzte Strohhalm!

Trotzdem vielen Dank und viele Grüße nach OS.

volti
04.10.2004, 20:08:46
Hier noch mal das Ergebnis 'disabled'!

Funktioniert tadellos, hat allerdings die Folge, dass meine Schriftfarbe nicht mehr schwarz, sondern grau ist.

Diese Einschränkung wollte ich eigentlich nicht, kann aber zur Not damit leben.

xabbuh
04.10.2004, 23:19:00
Original geschrieben von volti
Hier noch mal das Ergebnis 'disabled'!

Funktioniert tadellos, hat allerdings die Folge, dass meine Schriftfarbe nicht mehr schwarz, sondern grau ist.

Diese Einschränkung wollte ich eigentlich nicht, kann aber zur Not damit leben.

Kann man da nichts mit CSS machen?

volti
05.10.2004, 19:46:29
Interessante Anregung.

Das entspräche aber (so es funktionierte) nicht dem eigentlichen Sinn, etwas optisch als nicht benutzbar grau bzw. besser 3d-grau darzustellen (disabled eben).

Ich habe meine <input>-tags ja eh schon mit css und wie z.B. 'class=i' usw. formatiert.

Und folgende css-Deklaration geht schon mal nicht:
input.i:disabled {background-color: #FF9999; color:black};

xabbuh
05.10.2004, 20:49:05
Zumindest wenn du ein Eingabefelder über JavaScript disablest, kannst du gleichzeitig auch sein Aussehen ändern.

Beispiel:

<script type="text/javascript">
<!--
function disableFiel(field)
{
field.disabled = true;
field.style.backgroundColor='#ffffff';
}
//-->
</script>


Das würde zwar der eigentlichen Philosophie des Ausgrauens widersprechen. Da du aber auf diese Methode eh nur zugreifst, um quasi ein Ein- bzw. Ausschalten des readonly Status mittels JavaScript zu simulieren, wäre das meiner Ansicht nach schon in Ordnung.

christianm_ghc
06.07.2006, 19:28:33
hi Leutz,

bin über Google auf diesen Thread gekommen. Ist zwar schon was älter, aber vielleicht haben mehrere dieses Problem.

Man kann über JS Formularelemente schreibschützen. Man muss eben nur die JS-typische Groß/Kleinschreibung beachten:

document.formular.element.readOnly = true / false;

Only mit großen O !!

hth

Christian

volti
06.07.2006, 20:24:16
Hallo christianm_ghc,
danke für den Tipp. Ist zwar für mich zu spät->Anwendung läuft seit 1,5 Jahren tadellos; weiß schon gar nicht mehr genau wie ich das denn letztendlich gelöst hatte.

Als mit anderen Programmiersprachen großgewordener Progger hatte ich anfangs mit js/php wegen der Groß/Kleinschreibung immer so meine Probleme :-)