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?

• jquery
• css
• textbox
• placeholder

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">​

It's not perfect but here's a stab at making a placeholder like new browsers:

JS--

//when the input is clicked, select it's text so the cursor doesn't start typing in the middle of your placeholder text
​$('input').on('click', function () {

    //by selecting the input on click we mimic the focus event
    $(this).select();
}).on('keyup', function () {

    //if the input is un-touched
    if (this.value == '' || this.value == '[Your Name]') {

        //make the input in-active
        this.className = '';

        //and make sure the placeholder is still showing
        this.value = '[Your Name]';
    } else {

        //since something has been entered into the input, add the active class to make the text black
        this.className = 'active';
    }
});​​​

CSS --

input {
    color : grey;
}
​input.active {
    color : black;
}​

This makes the input by default have grey colored text, and when the user enters something, it goes to black.

HTML --

​<input type="text" value="[Your Name]" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Here is a demo: http://jsfiddle.net/2VfwW/

You could add your placeholder to the placeholder attribute, then check for support for that attribute, and if it doesn't exist you could run the code above but start by making the value of each input the value of the placeholder attribute:

$(function () {

    //find all input elements with a placeholder attribute
    $('input[placeholder]').val(function () {

        //set the value of this input to the value of its placeholder
        return $(this).attr('placeholder');
    });
});

Something like the below in jQuery should work.

$('#myElement').keypress(function() { this.val = ''; }

Using Javacript:

<input type="text" onfocus="if(this.value == 'Your text'){this.value=''}" value='Your text' />

If you have a value in a text field and want to clear it only when the user enters a key in the textfield, you can do this:

$("#myTextfield").keypress(function() {
    $(this).val("");
});

This next bit checks to see if the user has typed anything in the text field; if not, add a placeholder when it loses focus.

$("#myTextfield").blur(function() {
    if($(this).val() === "") {
        $(this).val("Search...");
    }
});