jQuery to wipe input field when clicked

Question

I have tried to make a jQuery code to delete the value of my (email) input field when clicked, and when unclicked (.blur()) the value (same as before) should return to the input field, unless something else is written. It works when I click the input field, the text disappears and comes back when I click away, but when i write something and deletes it, the value/text from before doesn't come back.. Heres my code, applied to a simple input type="email"

$(document).ready(function() {
var default_email = 'Skriv din email her..';

$('input[type="email"]').attr('value', default_email).focus(function() {
if ( $ (this).val() == default_email) {
    $(this).attr('value', '');
}
}).blur(function() {
if($(this).val() == '') {
    $(this).attr('value', default_email);
};
});

});

dfsq · Accepted Answer · 2014-05-27 18:42:16Z

1

You are trying to make your own placeholder. Nice, but more natural and effective is to use native:

<input type="email" placeholder="Skriv din email her.." >

Demo: http://jsfiddle.net/E9EzZ/2/

If you anyway want to create your own version then fix your code as follows:

var default_email = 'Skriv din email her..';

$('input[type="email"]').val(default_email)
.focus(function () {
    if (this.value == default_email) {
        this.value = '';
    }
})
.blur(function () {
    if (this.value == '') {
        this.value = default_email;
    };
});

Demo: http://jsfiddle.net/E9EzZ/1/

edited May 27, 2014 at 18:42

answered May 27, 2014 at 18:36

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Piotr Karasiński · Accepted Answer · 2014-05-27 18:40:59Z

1

Check this fiddle: http://jsfiddle.net/LfNZu/ Just change function attr() to val()

answered May 27, 2014 at 18:40

Piotr Karasiński

4291 gold badge4 silver badges10 bronze badges

Collectives™ on Stack Overflow

jQuery to wipe input field when clicked

2 Answers 2

Demo: http://jsfiddle.net/E9EzZ/2/

Demo: http://jsfiddle.net/E9EzZ/1/

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Demo: http://jsfiddle.net/E9EzZ/2/

Demo: http://jsfiddle.net/E9EzZ/1/

Comments

Comments

Related