Question

I am using basic code to highlight the text within a text field when the user clicks in it:

<input type="text" id="search_for" name="searchTerm" onclick="this.select()">

Which is great, but you only have the choice to delete, meaning you can’t actually click in the middle of the selected text to add something in the middle of words/characters already in there.

Scenarios… if a user does a search for “red car”, they should be able to click in the box, its hightlighted, so hit delete and search for “blue car”. Or, they might want to click in the input and change their search to “big red car”.

Is it possible to click then unset the highlight by clicking again? Or what other method could I use?

Or should I select the field on page load, then click to un-select? Is that even possible?

I’ve searched extensively for this but no luck as yet.

Answer 1

You could keep track of the number of clicks in the input and basically toggle select() vs focus(). It may not be exactly what you are referring to, but it is something you could do.

See working jsFiddle demo.

HTML:

<input type="text" 
       id="search_for" 
       name="searchTerm" 
       onclick="searchForClick(this);" 
       value="text text text text" />​

JavaScript:

searchForClickCount = 0;

function searchForClick(el) {

    if (searchForClickCount === 0) {
        el.select();
        searchForClickCount++;
    } else if (searchForClickCount >= 0) {
        el.focus();
        searchForClickCount = 0;
    }

}​