Question

Currently I have an input box which has the value “Current Website”

When they click it I run this function:

function clearMeHttp(formfield) {
    if (formfield.defaultValue == formfield.value) {
        formfield.value = "http://";
    }
};

It works fine if you click into the box, but if you tab into the box it just highlights the word “http://” which defeats the purpose of it unless they hit the right arrow key which I want to avoid.

Thanks!

Here’s the other code: <input onblur="restoreMe(this)" onfocus="clearMeHttp(this)" type="text" class="fade" name="website" value="Current website">

restoreMe just fades default value back in gently with jquery

Answer 1

I have changed your code a bit, but uses jquery events instead of inline html.

Full script used:

var defaultVal = 'Current website';
$(function() {

    $('.urlCheck').focus(function(e) {
        if ($(this).val() == "http://" || $(this).val() == '' || $(this).val() == defaultVal) {
            $(this).val('http://');
            $(this).select(false);

        }
    });

    $('.urlCheck').keyup(function(e) {
        if ($(this).val() == "http://" || $(this).val() == '' || $(this).val() == defaultVal) {
            $(this).val('http://');
        }
    });

    $('.urlCheck').blur(function(e) {
        $(this).val(defaultVal);
    });

});

Working Link : http://jsfiddle.net/29gks/6/

The keyup event is the override for Chrome and Safari