Karem
Karem

Reputation: 18103

Input fields with value remove

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

Upvotes: 0

Views: 1887

Answers (3)

Andy E
Andy E

Reputation: 344537

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";    
});

Upvotes: 2

Jimmy
Jimmy

Reputation: 555

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

Upvotes: 0

derek
derek

Reputation: 4886

have a look at the jquery watermark plugin

Upvotes: 0

Related Questions