Textfelder mit eigenem Javascrip

[elChupete]

Moin,

ich möchte im Formulargenerator einem Feld vom Typ Text den folgenden Codeschnipsel zuweisen. Geht das irgendwie?


onfocus="this.addClass('gotfocus')" onblur="this.removeClass('gotfocus')"

Danke
Stefan

[Toflar]

Du kannst jedem Feld eine eigene CSS-Klasse geben.

1. Gib deinem Feld die CSS-Klasse "hoppla"
2. Leg ein neues Template moo_hoppla.tpl (oder .html5 oder .xhtml) an
3. Binde das Template in dein Seitenlayout ein
4. Schreib das da dort rein:

<script>
$$('.hoppla').addEvent('focus',function(e){this.addClass('gotfocus');}).addEvent('blur',function(e){this.removeClass('gotfocus');});
</script>

So ungefähr

[elChupete]

Danke,

hat mit dem template zwar nicht funktioniert, aber als javascript direkt im Seitenlayout funktionierts.

Wie muss das script aussehen, wenn ich das Feld mit dem defaulttext "hoppla" füllen möchte?

Wenn bei onfocus "Hoopla" drinsteht, feld leer machen und gotfocus setzen. bei onblur wenn feld leer, dann wieder "hoppla setzen und onblur entfernen.

danke schonmal

[xchs]

Könntest Du dieses Formularfeld nicht auch über den Elementtyp "HTML" erzeugen und dort direkt diese Attribute reinschreiben?

[andreasisaak]

Danke,

hat mit dem template zwar nicht funktioniert, aber als javascript direkt im Seitenlayout funktionierts.

Wie muss das script aussehen, wenn ich das Feld mit dem defaulttext "hoppla" füllen möchte?

Wenn bei onfocus "Hoopla" drinsteht, feld leer machen und gotfocus setzen. bei onblur wenn feld leer, dann wieder "hoppla setzen und onblur entfernen.

danke schonmal

Dann nimm doch einfach die Extension cleardefault

[elChupete]

Die Extension cleardefault habe ich probiert. Die macht aber leider keinen Restore des default Textes, wenn das Eingabefeld mit leerem Inhalt verlassen wird.

Die backbone_it Scripts moo-form machen zwar den clear und den restore, aber erlauben keine Farbanpassungen.

Ich habe jetzt selber ein Script erstellt und wie von Toflar erklärt über ein eigenes template erfolgreich einbinden können.

Für alle die es interessiert

<script>
$$('.focus').addEvents({
	'focus': function(e){
		if (this.value.contains('Suche')) this.value = '';
		this.setStyle('color', '#26264C');
	},
	'blur': function(e){
		if (this.value == '') {
			this.value = 'Suche...';
			this.setStyle('color', '#AAAAAA');
		}
	}
});
</script>

Im Formular noch initial mit "Suche..." füllen und die CSS Klasse "focus" zuweisen und per CSS initial die Farbe #AAAAAA zuweisen.

Nochmal vielen Dank
Stefan

p.s. und das hatte den netten Nebeneffekt, dass ich ein wenig Javascrip bzw. Mootoolsscript gelernt habe.

[andreasisaak]

Doch. cleardefault macht einen erfolgreichen Restore. Hab ich in unzähligen Projekten eingesetzt. Und die Farbveränderungen hättest du bei cleardefault mit der Klassenänderung und ein wenig CSS erreichen können.

[elChupete]

Doch. cleardefault macht einen erfolgreichen Restore. Hab ich in unzähligen Projekten eingesetzt. Und die Farbveränderungen hättest du bei cleardefault mit der Klassenänderung und ein wenig CSS erreichen können.

Ahh OK dann habe ich da was falsch gemacht. Naja egal auf jedenfall habe ich was gelernt

[otomo]

cleardefault macht genau das was ich gerade auch gesucht habe. :-)