✔ Formular mit CSS gestalten

Status
Nicht offen für weitere Antworten.
wenn ich im Browser Javascript manuell deaktiviere funktioniert das Skript weiterhin.
Zum Vergrößern anklicken....
;)

Hab mich ein wenig über htc (HTML Component) schlauch gemacht.
Ein paar Fakten:

- "Limitation
At present, only IE 5.0 or later browsers support this HTC technology. Microsoft is still waiting for World Wide Web Consortium adoption. So, to successfully deploy this control on a Web site, a browser detection routine is required to ensure the user is running a version of IE 5.0 or later before launching the components. "

- mit JS deaktivert, funktioniert das Skript weiterhin

-Introduced in Internet Explorer 5, HTCs provide a simple mechanism to implement DHTML behaviors in script. An HTC file is nothing but an HTML file, saved with an .htc extension, that contains scripts and a set of HTC-specific custom elements that expose properties, methods, and events that define the component.


Ein paar Links:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/behaviors/howto/creating.asp

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/behaviors/overview.asp

Nun zurück zu meinem Problem: ;)

Funktioniert bei jemand die :focus-Eigenschaft für ein beliebiges Element mit der obigen *.htc Erweiterung?

Grüsse,
Rexo
 
Probier mal Folgendes, um den Elementen temporär die Klasse „foobar“ zuzuweisen:
Code: 
window.onload = function() {
	var inputElements = document.getElementsByTagName("input");
	for(var i=0; inputElements.length; i++) {
		var inputType = inputElements[i].getAttribute("type");
		if( !inputType || inputType.toLowerCase() != "text" || inputType.toLowerCase() != "password" ) {
			continue;
		}
		inputElements[i].onfocus = new Function("this.className += ' foobar'");
		inputElements[i].onblur  = new Function("this.className = this.className.replace(/\bfoobar\b/s, '')");
	}
}
Ist bisher jedoch ungetestet.
 
Hi Gumbo,

hab deinen Code direkt im body-Bereich eingefügt.

<body hier_steht_dein_Code >

Ich hab das htc-File als behavior behalten und dein Code eingefügt - hat aber nicht funktioniert, oder hab ich dich falsch verstanden?

Grüsse,
Rexo

PS: Ich hab das Testfile von hpvw mit deinem Code + htc-File mal zu einem neuen File zusammengefasst. So kann jeder "schneller" experimentieren ;)

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
    <meta http-equiv="Content-Type"
        content="application/xhtml+xml; charset=UTF-8" />
    <title>Eingabefelder mit wechselndem Hintergund</title>
<style type="text/css" media="screen">
.bgChanging {
    color:#000;
    background:#fff;
    border:1px #363 solid;
}
.bgChanging:focus {
    color:#000;
    background:#cfc;
}
 img, div { behavior: url(csshover2.htc) }
</style>
</head>

<body window.onload = function() {
	var inputElements = document.getElementsByTagName("input");
	for(var i=0; inputElements.length; i++) {
		var inputType = inputElements[i].getAttribute("type");
		if( !inputType || inputType.toLowerCase() != "text" || inputType.toLowerCase() != "password" ) {
			continue;
		}
		inputElements[i].onfocus = new Function("this.className += ' foobar'");
		inputElements[i].onblur  = new Function("this.className = this.className.replace(/\bfoobar\b/s, '')");
	}
} 
>
<h1>Eintrag</h1>
<div>
    <form action="./send.php" method="post">
        <p>
            <input
                type="text"
                name="title"
                class="bgChanging" />
        </p>
        <p>
            <textarea
                name="message"
                class="bgChanging"
                cols="40"
                rows="10"></textarea>
        </p>
        <p>
            <input
                name="send"
                type="submit"
                value="Senden" />
        </p>
    </form>
</div>
</body>
</html>

PS: csshover2.htc kann man sich hier herunterladen
http://www.xs4all.nl/~peterned/htc/csshover2.htc
 
Wenn du Gumbos Lösungsvorschlag verwenden willst, dann solltest du den Script-Code in einem <script> -Element notieren:

HTML: 
<script type="text/javascript">
window.onload = function() {
	var inputElements = document.getElementsByTagName("input");
	for(var i=0; inputElements.length; i++) {
		var inputType = inputElements[i].getAttribute("type");
		if( !inputType || inputType.toLowerCase() != "text" || inputType.toLowerCase() != "password" ) {
			continue;
		}
		inputElements[i].onfocus = new Function("this.className += ' foobar'");
		inputElements[i].onblur  = new Function("this.className = this.className.replace(/\bfoobar\b/s, '')");
	}
} 
</script>
 
Hab den Code verbessert: :-(

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
    <meta http-equiv="Content-Type"
        content="application/xhtml+xml; charset=UTF-8" />
    <title>Eingabefelder mit wechselndem Hintergund</title>
<style type="text/css" media="screen">
.bgChanging {
    color:#000;
    background:#fff;
    border:1px #363 solid;
}
.bgChanging:focus {
    color:#000;
    background:#cfc;
}
 img, div { behavior: url(csshover2.htc) }
</style>
<script type="text/javascript">
window.onload=function() {
	var inputElements = document.getElementsByTagName("input");
	for(var i=0; inputElements.length; i++) {
		var inputType = inputElements[i].getAttribute("type");
		if( !inputType || inputType.toLowerCase() != "text" || inputType.toLowerCase() != "password" ) {
			continue;
		}
		inputElements[i].onfocus = new Function("this.className += ' foobar'");
		inputElements[i].onblur  = new Function("this.className = this.className.replace(/\bfoobar\b/s, '')");
	}
} 
</script>
</head>

<body>
<div>
    <form action="./send.php" method="post">
        <p>
            <input
                type="text"
                name="title"
                class="bgChanging" />
        </p>
        <p>
            <textarea
                name="message"
                class="bgChanging"
                cols="40"
                rows="10"></textarea>
        </p>
        <p>
            <input
                name="send"
                type="submit"
                value="Senden" />
        </p>
    </form>
</div>
</body>
</html>

Es kommt die Fehlermeldung: "'undefined' ist Null oder kein Objekt". Ich hab oben die Zeile markiert, in der laut dem Debugger der Fehler auftauch (wobei der Fehler ja oft eine Zeile darüber auftaucht..).
Da ich mich mit der Syntax von JS leider wenig bis gar nicht auskenne, bin ich auf eure Hilfe angewiesen ;)
 
Ich vermute, daß sich der Behavior-Hack csshover2.htc nicht auf die Pseudoklasse :focus anwenden lässt.

Wenn du, entgegen deinem ursprünglichen Vorhaben, nun doch Javascript einsetzen willst, dann probier mal folgendes (ohne Behavior-Hack):

CSS-Code
Code: 
.bgChanging {
    color:#000;
    background:#fff;
    border:1px #363 solid;
}
.bgChanging:focus, .focus { /* Klasse .focus für IE */
    color:#000;
    background:#cfc;
    border:1px #363 solid;
}
HTML: 
<input type="text" name="title" class="bgChanging" onfocus="this.className='focus'" onblur="this.className='bgChanging'"/>
 
Ich hab den Algorithmus noch etwas verbessert, nun sollte er funktionieren:
Code: 
window.onload=function() {
	var inputElements = document.getElementsByTagName("input");
	for(var i=0; i<inputElements.length; i++) {
		var inputType = inputElements[i].type;
		if( inputType.toLowerCase() != "text" && inputType.toLowerCase() != "password" ) {
			continue;
		}
		inputElements[i].className += " default";
		inputElements[i].onfocus = new Function("this.className += ' valid'");
		inputElements[i].onblur  = new Function("if(this.value == this.defaultValue || this.value == '') this.className = this.className.replace(/(\\s*\\bvalid\\b)+/, '')");
	}
}
Als Klassen wären da „default“ und „valid“.
 
Ich vermute, daß sich der Behavior-Hack csshover2.htc nicht auf die Pseudoklasse :focus anwenden lässt.
Zum Vergrößern anklicken....
Dieses Feature sollte die Version 2 "eigentlich" erhalten haben.

Hab mal die vermeintliche Feature-Liste kopiert:
Fixed :active, it actually didn't work.
Added :focus in a separate 2.01 version. No other differences from 1.41.
Added an onunload handler to clean up the created events, this fixes an increase in both parsetime and memory use per reload.
Added a check to prevent the script from working in IE7 (including any alphas and betas), since :hover will work natively.
Both 1.41 and 2.01 are now licensed under LGPL. Yes, this allows free commercial use.
Various other minor tweaks.
Zum Vergrößern anklicken....

Wenn du, entgegen deinem ursprünglichen Vorhaben, nun doch Javascript einsetzen willst, dann probier mal folgendes (ohne Behavior-Hack):
Zum Vergrößern anklicken....

Ich möchte eigentlich immer noch kein JS einsetzen, aber wie du weiter oben bereits erwähnt hast, scheint die Syntax von JS und den *.htc Files sehr ähnlich aufgebaut zu sein. Sprich, wenn ich die Problemlösung in JS im Syntax verstanden hab, kann ich evtl. das Wissen auf das htc-File umwälzen.

Hab nun ein wenig weitergeforscht. ;)

Der csshover2.htc - Hack scheint wohl ein kleines Problem mit dem IE zu haben. Wenn der IE eine Pseudo-Verhalten wie textarea:focus nicht versteht - verändert er dies und gibt es als textarea:unknown zurück.

Ein Problem taucht nur auf, wenn er von mehrere Pseudo-Klassen textarea:focus und textarea:active ausgeht und beiden ein textarea:unknown zuordnet, kann man natürlich nicht mehr auf die Ursprungselemente zurückschließen.

Aber wenn man sich mit dem textarea:focus -> textarea:unknown zufrieden gibt, ist eine
direkte Zuordnung gegeben.
-->> In dem htc-File müsste nur(?) eine Zuordnung des :unknown zu dem jeweiligen Focus-Effekt geben. Leider versteh ich die Syntax des htc nicht, daher auch der Wunsch das JS zu verstehen ;)

Versteht jemand das htc-File und kann diese Idee im htc umsetzen? Oder lieg ich mit der Lösungsidee voll daneben?
 
Wozu unbedingt eine HTC-Lösung?
Zum Vergrößern anklicken....
Ich bin bisher auf keine andere lösungsträchtige Alternative gestoßen (kein JS!). Wenn du eine Möglichkeit kennst, wäre ich darüber mehr als erfreut ;)

Das Grundproblem: (siehe 1 Post)
3 Zustände:
1) Hintergrundbild des Inputs vorhanden
2) User "aktiviert" das Feld (durch "keypress", a:active oder was auch immer) -> Hintergrundbild verschwindet bzw. wird weiss (gesamte Fläche)
3) Wenn der User etwas eingegeben hat bleibt die Hintergrundgrafik auf weiss
-> wenn er nichts eingegeben hat (und das Feld wieder verlässt)ändert sich die Grafik wieder auf den im Pkt. 1) genannten Hintergrund

Alternativ kann Pkt 3) auch auf dem weissen Hintergrund von Pkt 2 bleiben (was die Sache wohl deutlich vereinfacht bzw. überhaupt mit CSS realisierbar macht )
Zum Vergrößern anklicken....

Wäre es nicht genial mit einem Hack (htc oder direkt etwas für CSS) den IE zu "zwingen" allen Elementen eine Hover-Verhalten (hover, active, focus und co) zu geben. Dann gehört das lästige JS in diesem Bereich (onfocus=".." und onblur=".." und co) der Vergangenheit an.
Man sollte doch immer offen für die oft zitierte Accessibility sein. Noch ein Link zum aktuellen "Stand" http://www.w3.org/WAI/ .

~~~
-> Zurück zum aktuellen Stand der Problemlösung:
Aber wenn man sich mit dem textarea:focus -> textarea:unknown zufrieden gibt, ist eine
direkte Zuordnung gegeben.
-->> In dem htc-File müsste nur(?) eine Zuordnung des :unknown zu dem jeweiligen Focus-Effekt geben. Leider versteh ich die Syntax des htc nicht, daher auch der Wunsch das JS zu verstehen

Versteht jemand das htc-File und kann diese Idee im htc umsetzen? Oder lieg ich mit der Lösungsidee voll daneben?
Zum Vergrößern anklicken....

Grüsse,
Rexo
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück