Search box with light text

May 20, 2013 at 10:37 am | Posted in Oracle Developement | 5 Comments

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.

Advertisements

5 Comments »

RSS feed for comments on this post. TrackBack URI

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

  2. 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.

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


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.
Entries and comments feeds.

%d bloggers like this: