Why doesn't this search box select all text on click?

Question

You can see the search box in question at: http://www.trailbehind.com . If the user tries to search twice, they have to press backspace a bunch to clear the text, but I'd like to select all text on double click, which inputs should do by default. Why doesn't mind?

When the users first clicks, I clear the input as follows:

input.onclick = clearInitialValue;

function clearInitialValue() { 
  this.value = ""; 
  this.onclick = 'return True';
  this.style.color = "black";
}

Another thing you might need to know to help me solve this riddle is that I used the input to instantiate a YUI autocomplete: http://developer.yahoo.com/yui/autocomplete/ , but I can't find anything in the docs that explains why double-clicking the input to select text wouldn't work.

Answer 1

keep in mind that you can only have one method for each javascript event, so, in your example you are assinging the onclick event, make sure you do not do it again.

to have more you need to use an event listener.

var oDiv = document.getElementById('thediv');

oDiv.addEventListener('click', function (e) {
    // your method here
}, true);

or simple

oDiv.addEventListener('click', clearInitialValue, true);

you metion that you are using YUI, so the code will be something like:

 YAHOO.util.Event.on(oDiv, "click", clearInitialValue); 

not that answers your question directly, but keep in mind when dealing with javascript events.

---

to answer your question, your code runs great... check out the code running at JSBIN

you can add a /edit to the url in order to edit it.

Answer 2

Instead of your

  this.onclick = 'return True';

try

  this.onclick = 'this.select(); return true';

This will select the text in the box.

Consider doing this on focus, instead of click.

If that isn't behaving like you'd like, trying turning off the YUI autocomplete, to see if that is interferring. I've seen that.

If that doesn't do it, simplify more by implementing it on a clean page, with no other JS, before sticking it into the google map.

Hope this helps.

Answer 3

i see one thing that could be a problem, you have

this.onclick = 'return True';

try

this.onclick = 'return true';

javascript is case sensitive.