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:

  1. Create a text field for your search box (P11_SEARCH in my example).
  2. Set the default value to “Enter Search Terms”.
  3. Set the HTML Form Element Attributes to: style=”font-weight:100″
  4. 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”:

da1

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,

da2

and choose the text field as the affected item.

da3

Add a second TRUE action to set the font-weight to normal:

da4

 

 

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.

5 thoughts on “Search box with light text

  • May 20, 2013 at 11:31 am
    Permalink

    Chris itzz working…Cheersss….\m/……..

    Reply
  • May 20, 2013 at 12:58 pm
    Permalink

    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.

    Reply
    • May 21, 2013 at 11:23 am
      Permalink

      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.

      Reply
  • May 29, 2013 at 7:52 pm
    Permalink

    Anything mixing IE and HTML5 will often give a little grief. Placeholder feature is good, but at least APEX provides alternatives

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *