See my search button on my home page (right column, under contact). The norm is when you want to enter a search query the word ‘search’ should disappear? How it is now the word ‘Search’ stays and you have to delete to add your query…
Any idea on how to make the word ‘search’ disappear when you put the cursor in the box??
This particular trick is limited to WebKit browsers, as far as I know,
although I haven’t tried it on the very latest Firefox. IE support
maybe in IE9, but I wouldn’t hold my breath. It’s an HTML 5 element,
although Safari has had support for it since forever, and it works in
that browser under any DOCTYPE.
Here’s a Gist with a bit of Protaculous code to simulate this in most
browsers. You would need to update the line that begins with var search so it points to the actual id of your search field. (And you
will need to use the Extended dialog to set the ID attribute on that
field, or my FixForm Action, since Freeway doesn’t get that part right.)
Stepping through what this does, the test function first creates a
hidden element in the page, and if the browser will accept setting
that element to type=search, it returns true.
Then, there’s a simple either/or.
If the browser supports the search element, then the type=search and
placeholder=Search… parts are added to the element. The browser does
all the rest.
that support it, we add the rounded corners, Safari-style, and the
gray text style for the placeholder.
Next, if the search field is blank, we add the placeholder text. (It
might not be blank on page load, particularly if you are using server-
side form processing and pre-fill the field during a search results
Then we add a focus and blur observer, checking for default text and
emptiness, respectively, and either clearing the field and setting the
font color to black, or restoring the placeholder text and graying it
back, depending on the state of the field.
The benefit of doing this trick using the script is that your page
will still validate in a < HTML 5 DOCTYPE. Since Freeway doesn’t do
HTML 5 yet, you need this if you’re worried about validation.
On Jun 22, 2011, at 3:09 PM, DeltaDave wrote:
Well the FWT site uses an Item>Extended attribute on the search
input field of placeholder/search messages.
So select the input field Item>Extended
New name/value pair of placeholder and Search messages (or whatever)
Make sure that you have nothing in the value box in the inspector
I have no clue what cross browser support for this is though.
Apply Protaculous to the page, and set the library picker to prototype-
packed (or scriptaculous-packed if you are using any other Scripty or
FX Actions on the same page). Then click the top Function Body button
in the Actions interface and paste in this code. Be sure to update the
line with the correct ID of the search field, and be sure to apply the
same ID to your search field as noted previously.
On Jun 22, 2011, at 4:03 PM, Justin Easthall wrote:
Forgot to mention, if you are currently using the Value field in
Freeway to set this element to read Search…, you need to delete
that. Click on the search element, and look in the third tab from the
left (output) to see that field. In order for this script to work,
that value must default to nothing.
On Jun 22, 2011, at 4:14 PM, Justin Easthall wrote:
You need to change it to just ‘q’, since that’s the name of your
search field, and you need to single-click on the q field, choose
Item / Extended from the main menu, make sure the Input tab is
highlighted, click New, and add
in the resulting sub-dialog. This code only applies to form elements,
not to divs, so I presume that you want to make the Safari-style
rounded search box out of your q field.
On Jun 22, 2011, at 4:40 PM, Justin Easthall wrote:
I tried the above? Not working what do I put in the extended>Div
I have changed the div to SearchBox, in the properties and in the
extended i did SearchBox for name and value? I know thats wrong!
Are you using the Site Search Action? That’s probably it. If you can’t
get at the form element to add the ID, you can change the script to
target it a different way. Try changing the line that begins with var search to read:
var search = $$('input[name="q"]').first();
As far as adding a special rule for IE, you can use conditional