WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

Du bist nicht angemeldet.

#1 13.06.2017 17:35:51

bakerling
Mitglied

MiniForm Felder vorbelegen

Hallo

Gibt es bei MiniForm die Möglichkeit Formularfelder mit dem Feldnamen vorzubelegen?

z.B. Beim Feld "Nachname" ist das Feld mit Nachname vorbelegt. Sobald man ins Feld klickt, verschwindet die Vorbelegung und man kann das Feld ausfüllen.

Ich danke für Tips.

LG Harry

Offline

#2 13.06.2017 18:00:08

bernd
Developer

Re: MiniForm Felder vorbelegen

Hallo Harry,
das Zauberwort heißt "placeholder".
Das müßtest du halt über "Template anpassen" da wo du's brauchst manuell reinpinseln:

 <input required="required" class="{NACHNAME_ERROR}" type="text" id="nachname" name="mf_r_nachname" value="{NACHNAME}" placeholder="Nachname" />

... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

Liked by:

berny, better-work

#3 13.06.2017 22:12:37

bakerling
Mitglied

Re: MiniForm Felder vorbelegen

Hallo bernd

Vielen Dank für Deine schnelle Hilfe.
Ich werde es, sobald ich dazu komme, ausprobieren.

LG Harry

Offline

#4 14.06.2017 06:25:36

florian
Administrator

Re: MiniForm Felder vorbelegen

Gute Sache. Wird laut CanIUse von allen zeitgemäßen Browsern unterstützt.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#5 14.06.2017 18:36:42

bakerling
Mitglied

Re: MiniForm Felder vorbelegen

Hallo bernd

Ich habe es nun mal ausprobiert und HEUREKA es funktioniert.

Nochmals vielen Dank.

LG Harry

Offline

#6 16.06.2017 09:47:30

dev4me
Developer

Re: MiniForm Felder vorbelegen

The placeholder is now added for text-input and textarea fields.
Example

2w4h24m.jpg

Have fun,
Ruud

Offline

Liked by:

bernd, screamindan

#7 16.06.2017 09:50:12

florian
Administrator

Re: MiniForm Felder vorbelegen

Great! Thank you, Ruud!


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#8 16.06.2017 14:27:52

bakerling
Mitglied

Re: MiniForm Felder vorbelegen

Hallo Ruud

Super!!  smile
Vielen Dank.

LG Harry

Offline

#9 22.06.2017 21:09:30

meetje
Mitglied

Re: MiniForm Felder vorbelegen

Hi Ruud,
thanks for the  Placeholder function.
In the present version the placeholder disappears when the first letter is typed in.
I think it more logical if the placeholder disappears when the mouse / finger is placed in / on the field. I now tend to try and remove the placeholder first with the delete / backspace key (which doesn't work). But maybe it's just me, I am very thankful for the module as it is, but maybe you'll find it a good idea and worth considering.

Offline

#10 22.06.2017 21:16:48

bernd
Developer

Re: MiniForm Felder vorbelegen

Hi meetje,

In the present version the placeholder disappears when the first letter is typed in.

this is the expected behavior of the placeholder attribute in HTML5

Documentation schrieb:

Definition and Usage

The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).

The short hint is displayed in the input field before the user enters a value.

Your desired behavior could only be implementet using some kind of JavaScript.


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

#11 22.06.2017 21:34:46

meetje
Mitglied

Re: MiniForm Felder vorbelegen

Oh okay, thank you Bernd! If it is the expected behavior then it will certainly be familiar for most people and is it just me :-)

Offline

#12 23.06.2017 08:19:20

florian
Administrator

Re: MiniForm Felder vorbelegen

There are probably more elegant solutions, but I'm often using a kind of this:

...
<input type="text" 
value="Search" onclick="this.value=removeDefault(this.value,'Search')" 
onblur="this.value=restoreDefault(this.value,'Search')"/>
..

<script type="text/javascript">		
	function removeDefault(v,dv) { 
		if (v==dv) {  v="";  } 
		return v;
	}

	function restoreDefault(v,dv) { 
		if (v=="") {  v=dv;  }
		return v;
	}
</script>

This way, the field is pre-filled with the value "Search", what is removed when clicking into it and restored if the field gets out of focus and is still empty. The disadvantage: works only with JavaScript.

Beitrag geändert von florian (23.06.2017 08:20:09)


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#13 23.06.2017 08:39:25

meetje
Mitglied

Re: MiniForm Felder vorbelegen

Hi Florian

thanks for your contribution.
My question however was related to a form - Miniform in this case - and how the form fields (like Name that are populated with a placeholder like  "Please enter your name") could be cleared when clicking in the field instead of typing the first letter (which in my opinion is counter intuitive.  As far as my skills reach (and unfortunately that's not very far ops ) we cannot use the code you provided for that purpose.
Thanks again.

Offline

Fußzeile des Forums

up