Question

I know I can use placeholder="some text here..." but how to make it so that the text will removed on key press instead of focus?
Is it possible using CSS or how to achieve it using jQuery?

Answer 1

If you would like a general solution that allows you to consider any default text value easily, consider this solution:

http://jsfiddle.net/KM43e/

All inputs of with a class name of “populated-text” will default to the text they are initialised with, and reset if you leave empty text in the field.

JavaScript:

jQuery(function ($) {

    // Removes the defualt text on key press
    function keyDown (e) {
        var input = $(e.target);

        if (input && !input.data('data-entered')) {
                input.data('data-entered', true);
                input.val("");
        }
    }

    // Restore the default text if empty on blur
    function blur(e) {
        var input = $(e.target);

        if (input && input.val() === "") {
                input.data('data-entered', false);
                input.val(input.data('blank-value'));
        }
    }

    $('.populated-text').each(function () {
        var input = $(this);
        input.data('blank-value', input.val());
        input.data('data-entered', false);
        input.keydown(keyDown);
        input.blur(blur);
    });

});​

Example inputs:

<input type="text" value="Some text here..." class="populated-text">
<input type="text" value="Any default text you like" class="populated-text">
<input type="text" value="Will be used as empty" class="populated-text">​