Search Input Failing Expectations

[kgmarie]

Hi all - I'm looking at the HomeSearchBar skin in Flare 12.

Here's the scene: When I click in the search bar in the Web Medium preview, the search input text disappears upon clicking, and reappears upon clicking somewhere else (if nothing is typed into the field, of course). This is the design I expect and want.

Here's the issue: The search bar does not function like this in the actual HTML5 output. When I click in the search bar, the search input text just stays there until you start typing.

What gives? Is this just another Flare bug or is there some way to fix this?

Thanks!

[nielsf]

It's a matter of taste. Different web sites do this differently. Some retain the "Search" text or icon until users start typing - I suppose as a service to those who might forget what the field is for between the time they click it and start typing... Others clear the box immediately. So the easy answer is "Don't try to fix it".
The long answer is that you need to root around deep in the bowels of the Flare publishing engine.
Or you can write a script on your masterpage that does it for you - something like:

Code: Select all

<script>
	var s = $( ".search-field" );
	s.focus(function() {
		s.attr("placeholder", "");
	});
	s.blur(function() {
		s.attr("placeholder", "Search site");
	});
</script>

This script finds the search box. On focus (put the cursor in the box), the placeholder text is removed. On blur (leave the search box) the placeholder text is restored.
If you want fancy, grab the actual placeholder text and save it for the blur event (if you should change it in the Flare skin or you localize). But the above should work.

[nielsf]

For completion - if you want to use the original placeholder instead of a fixed text:

Code: Select all

<script>
	var s = $( ".search-field" );
	var p = s.attr("placeholder");
	s.focus(function() {
		s.attr("placeholder", "");
	});

	s.blur(function() {
		s.attr("placeholder", p);
	});
</script>

The "p" variable first grabs the value of the placeholder attribute, and then uses that again when you leave the search box.