Search box with light text
You can often find search boxes that are pre-populated with text in a a light-weight font. When you click the box, the text disappears to make room for your search terms. The text you then type then shows in a normal-weight font.
Here are the steps to do this in Apex:
- Create a text field for your search box (P11_SEARCH in my example).
- Set the default value to “Enter Search Terms”.
- Set the HTML Form Element Attributes to: style=”font-weight:100″
- You may also want to change the Source Used attribute to “Always, replacing any existing value in session state”
This pre-populates the text box with light weight text.
Now we need a dynamic action with two TRUE actions: One to clear out the text box when it is clicked, the other to set the font-weight to normal.
Create a dynamic action “Clear Search Box”:
Make sure the DA has the condition to only fire when the current value is the default value of the text box.
Set the first TRUE action to Clear the text box,
and choose the text field as the affected item.
Add a second TRUE action to set the font-weight to normal:
When you now click the text field, the pre-populated text clears out, and you can type in a search term in normal font weight.
See the example here.
Please leave a comment if you found this useful.
Chris itzz working…Cheersss….\m/……..
Hi Christophe, you can actually use the placeholder field on the item in APEX to accomplish the same. The placeholder tag is actually a HTML5 feature so it depends your browser if it’s supported, but it’s native in APEX for you to use.
Thanks for the tip, Dimitri.
Hi Dimitri,
As u mentioned that placeholders are HTML5 feature, I was facing an issue few days back when on my public website(so most IE users), the placeholders were actually getting inserted into DB if the item was left blank and when I tried to put page level validation for the same, that failed too taking the placeholder value if textbox item is skipped
Since I cannot be sure, if the user uses HTML5 enabled browser, is there a better way to put the place holder functionality? Christoph’s is one way of doing it but there are a lot of items on loads of pages. Any inputs? Thanks.
Anything mixing IE and HTML5 will often give a little grief. Placeholder feature is good, but at least APEX provides alternatives