Placeholder Translation

[geadon]

Does anybody know of a way to get the placeholder value of an input field to translate when the system.variables.$language changes? I can get around this issue by using the field labels but would prefer to stick to using placeholders to save on space for mobile devices. Is there some server side code I could use?

Thanks in advance.

[Jon]

I guess you are currently applying the placeholder via the custom attributes of the Editor Input tab of Html Element Properties. I can't think of a way of introducing a variable at this point. A possible solution would be to apply the placeholder on the client using jQuery code, then you could add a value programmatically, possible by hiding the field label text with CSS display:none and using this as the text - this would give you the language independence you're looking for. But this seems quite a messy and labour intensive solution.

[geadon]

Hi Jon,

Thank you for your suggestion. It is a little overworked for something simple but could be a potential solution if I was to have the client side script apply this to all input fields, I could use one universal jQuery function.

[AJDulk]

You could use the Custom Layout option for a panel / page control. Pick up the label from the field and use it as the placeholder. What you would need to do it set the $EDITOR as a variable, then find the input and insert the placeholder using the field label as the value. Hide the field label and you automatically have placeholders in the input that is equivalent to the field label value.

I have tried something similar as a test and it worked. I then found an easier method and so scrapped my prototype. So I know it can be done but don't have an example.

[geadon]

That's a good suggestion AJDulk. I've only recently started experimenting with the custom layouts and what you have suggested could potentially work for us and it's nice and simple implement.

[AJDulk]

I have just done it myself, here is the code I used:

Code: Select all

#set ($MINIMAL_HTML = true)
<section>
#foreach&#40;$ctrl in $child_controls&#41;
	#if &#40;$ctrl.messagesShowing&#41;
		$MESSAGES
	#end
	#if &#40;$ctrl.showing&#41;
		#if &#40;$ctrl.elementType == "Field Control"&#41;
			<div>
			##$FIELD_HEADER
			$LABEL
			#if &#40;$ctrl.editableRadioOrCheckboxList&#41;
				$LIST_HEADER
				<ul>
				#foreach&#40; $list_item in $list_items &#41;
					<li>$LIST_BUTTON $LIST_LABEL</li>
				#end
				</ul>
				$LIST_TRAILER
			#else
			  #set &#40;$placeholder = "input placeholder='" + $ctrl.field.labelText.getText&#40;&#41; + "'"&#41;
			  #set &#40;$placeholderEditor = $EDITOR.replace&#40;"input", $placeholder&#41;&#41;
				<div>$placeholderEditor</div>
			#end
			<div>$HELP</div>
			##$FIELD_TRAILER
			</div>		#else
			## Write all controls excluding Field Controls
			<div>$CONTROL</div>
		#end
	#end
#end
</section>
<div></div>

This is the important bit:

Code: Select all

#set ($placeholder = "input placeholder='" + $ctrl.field.labelText.getText() + "'")
#set ($placeholderEditor = $EDITOR.replace("input", $placeholder))
<div>$placeholderEditor</div>

[geadon]

Very helpful, thank you.