Highlight search box text

[nihalz]

hi

what do i have to do to a search box form, so that whenever you click on the box, whatever text is there gets selected and the user can just hit backspace or delete to clear the whole box?

alternatively, is there any way to mimic the OS X style search bar, where you have a 'clear' button on the right of the bar? like this:
http://i13.tinypic.com/4tk5254.gif

thanks for any help!

[jscheuer1]

<input type="text" onclick="this.select();" value="search">

[Twey]

The user just has to double-click it on all systems I've used...

[eleven82]

I agree with jscheur1, but here's a little more to that code that when they click in the box the text disappears. If they don't type anything the text reappears when they click off the box.

<input type="text" onfocus="if(this.value=='Text')this.value=''" onblur="if(this.value=='')this.value='Text'" value="Text" />

[Twey]

Hmm. A bit of redundancy there. You can eliminate it by using the defaultValue property:
<input
type="text"
onblur="this.value = this.value || this.defaultValue;"
onfocus="this.value = '';"
value="Text"
>Stay away from XHTML at least until IE gets support.

[jscheuer1]

Hmm. A bit of redundancy there. You can eliminate it by using the defaultValue property:
<input
type="text"
onblur="this.value = this.value || this.defaultValue;"
onfocus="this.value = '';"
value="Text"
>Stay away from XHTML at least until IE gets support.

I almost said this about eleven82's idea until I realized that it would all work out more or less, as any value I entered would be preserved unless I changed it. However, with this new twist, if I enter a value, blur the element, and then focus on it again, my value will be lost.

[Twey]

True... perhaps:
<input
type="text"
onblur="this.value = this.value || this.defaultValue;"
onfocus="this.value == this.defaultValue && this.value = '';"
value="Text"
>

[jscheuer1]

True... perhaps:
<input
type="text"
onblur="this.value = this.value || this.defaultValue;"
onfocus="this.value == this.defaultValue && this.value = '';"
value="Text"
>

That doesn't do anything, as far as I can see, that is different than an ordinary text input. Try:


<input
type="text"
onblur="this.value = this.value || this.defaultValue;"
onfocus="this.value = this.value == this.defaultValue? '' : this.value;"
value="Text"
>

[Twey]

That code performs exactly the same function as mine, as far as I can see. Have I missed something?

[jscheuer1]

That code performs exactly the same function as mine, as far as I can see. Have I missed something?

Testing in Opera? That is all I did and the difference there is like I said. Probably would be in others.

eleven82's not too pretty code worked fine too. None of this was what the OP asked for though.

[nihalz]

wow....thanks for the replies...very helpful place indeed :)

[Twey]

Oh, yes I have, operator precedence:
<input
type="text"
onblur="this.value = this.value || this.defaultValue;"
onfocus="this.value == this.defaultValue && (this.value = '');"
value="Text"
>

[jscheuer1]

Oh, yes I have (sic. had), operator precedence . . .

That's a different way (generally, of what I've seen around) of doing things and now works:


onfocus="this.value == this.defaultValue && (this.value = '');"

What's the logic of that? Something like:

If the first condition isn't true, the second isn't even considered. But if the first condition is true, the second always is true, and is itself a setting operator that carries out the desired action.

Seems a bit tortured to me though I'm sure, knowing me, I could get used to it.

[Twey]

The "have" was intentional (following on from "have I missed something?").
What's the logic of that?A sequence of boolean comparison operators returns the result of the final expression reached before the final value of the expression as a whole cannot be changed by any further expressions. For example:
a() && b() && c();If the return value of a() is falsy (i.e. false, null, undefined, zero, NaN, or the empty string), the expression evaluates to that return value, and b() and c() are never called since their return values would have no effect on the truth value of the larger expression. If a() is truthy, however, b() is executed, since if the return value of b() is falsy it will change the truth value of the larger expression. Ditto for b() and c(). If c() is also truthy then the truth value of the expression is determined to be true, and the statement is evaluated to the return value of c(), since c() is the determining expression.

The same sort of behaviour (but in reverse, of course) applies to boolean OR; this is what allows us to do things like
function someEventHandler(e) {
e = e || event;
} -- set e to e if e is truthy, otherwise continue evaluating the expression and set e to event.

It's not really tortured. It could, in this example, have just as easily been written:
if(this.value == this.defaultValue) this.value = '';... but I thought the == and the && gave a nice symmetry when seen next to the = and the ||.

[jscheuer1]

The "have" was intentional (following on from "have I missed something?").

The '(sic. had)' was for other readers who didn't read the post with "have I missed something?", and for those who did, but who are not paying close attention. You obviously no longer 'have' a problem by that point (the point in time of my post). That is my understanding of its use - not to correct someone, but to show the correct meaning of a quote in the current context.


A sequence of boolean comparison operators returns the result . . .

Yes, I think that's what I said. It just looks strange. I'm not used to seeing, for example:


function example(){
condition1 == condition2 && (value1 = 'stringvalue');
}

My instincts tell me that would cause an error even if all the variables were defined in a suitable scope for that function. But now I'm thinking that it would work out just fine.

[Twey]

My instincts tell me that would cause an error even if all the variables were defined in a suitable scope for that function. But now I'm thinking that it would work out just fine.Indeed it would.

[goatfarmer98]

I read this entire thread and pasted

<input
type="text"
onblur="this.value = this.value || this.defaultValue;"
onfocus="this.value = this.value == this.defaultValue? '' : this.value;"
value="Text"
>
this into my code.

However, nothing happens. I placed text in the box and it looks at me giving no signs of a successful find. Searched several words on the page without success.

I am using XHTML Transitional with my primary browser being Firefox. I read the caution about IE but would like top get the search box to work in Firefox for starters.

Additionally, I would like for the searched text to be highlighted throughout the page and possibly designated pages.

In advance, Thanks.

[jscheuer1]

Other than the thread title, there's nothing in this thread about searching anything. All it's about is how to have a text box go blank onfocus if it's current value is the default, and how to make it return to the default value on blur if it's empty.

Further, although there is a DD script:

http://www.dynamicdrive.com/dynamicindex11/findpage.htm

I don't think it's up to date, and even if it were, I don't think it can do all that you require.

My advice would be to use Google Custom Search:

http://www.google.com/cse/

Still not exactly what you are after, but perhpas - given its many options, can come closest.

Now, as this is an old thread and really wasn't about a search script, if you want more help with a search script, please open a new thread.