Input fields with value remove

Question

Hello so i have two input fields (user & password)

I want to have in them "Username" and then when you click on it the text "username" goes away and are empty and you type your username. So like if you have pressed and you like click another way the Username comes again.. So only if there has been entered/typed something, and you click away from the input field the text you entered should still be there..

How to do this? example: http://www.dkbn.dk at the top at those two input fields

Answer 1

have a look at the jquery watermark plugin

Answer 2

Look here: http://stackoverflow.com/posts/3344509/edit

Answer 3

This is typically referred to as a watermark. There's a good amount of Javascript plugins available to do this. If you're using jQuery, I'd check out In-Field Labels. That's the one I use

Answer 4

Use the focus and blur events to decide when to add/remove the text:

$('#myinput').focus(function () {
    if (this.value == "Username")
        this.value = "";    
}).blur(function () {
    if (this.value == "")
        this.value = "Username";    
});