how do I clear the values in my text input fields?

Question

My code doesn't run and I want the value to be cleared when you click on another

what am I doing wrong?

var placeholderText = $('input').val();

$(placeholderText).focus(function() {
    $(this).attr('value', "");
});
$(placeholderText).blur(function() {
    $(this).attr('value', phTextVal);
});

Blazemonger · Accepted Answer · 2012-04-20 20:06:47Z

4

You're using 'placeholderText' as a selector, which won't select anything. Use $('input').focus(... and $('input').blur(... instead.

UPDATE

If you want to store the existing value, and then replace it, then store it as .data() in the <input> element itself:

$('input').focus(function() {
    $this = $(this);
    $this.data('oldval',$this.val());
    $this.val('');
});
$('input').blur(function() {
    $this = $(this);
    $this.val($this.data('oldval'));
});

http://jsfiddle.net/mblase75/AL2vS/12/

Or possibly:

$('input').blur(function() {
    $this = $(this);
    if ($this.val().length==0) { // only if the field is blank
        $this.val($this.data('oldval'));
    };
});

edited Apr 20, 2012 at 20:06

answered Apr 19, 2012 at 20:36

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

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

4 Comments

webdevgirl Over a year ago

jsfiddle.net/AL2vS/6 I did that but now everything shows up as my first value attribute.

Blazemonger Over a year ago

Fixable, but I don't understand why you want to overwrite the user's text as soon as he blurs out of the field.

webdevgirl Over a year ago

I had edited your code but if I wanna keep the original placeholder text I dont know how to do that jsfiddle.net/Nz2GH/4

Blazemonger Over a year ago

@webdevgirl Consider the updated answer, or post a new question.

aztechy · Accepted Answer · 2012-04-19 20:37:27Z

0

Do you mean like this?

http://jsfiddle.net/AL2vS/1/

answered Apr 19, 2012 at 20:37

aztechy

6407 silver badges15 bronze badges

Comments

clexmond · Accepted Answer · 2012-04-19 20:37:58Z

0

This will at least get the removal of text working:

var placeholderText = $('input');

placeholderText.focus(function() {
    $(this).attr('value', "");
});
placeholderText.blur(function() {
    $(this).attr('value', phTextVal);
});

You could also take a look at the HTML5 placeholder param.

answered Apr 19, 2012 at 20:37

clexmond

1,55913 silver badges21 bronze badges

1 Comment

webdevgirl Over a year ago

yes I know the html5 placeholder attribute will do that automatically but I wanted to learn the jQuery way

Roger · Accepted Answer · 2012-04-19 20:41:10Z

0

Check it out,

$('input').focus(function() {
    placeholderText = $('input').val();
    $(this).val("");
});

$('input').blur(function() {
    $(this).val(placeholderText);
});

http://jsfiddle.net/AL2vS/8/

you still need to do something with the data that is entered.

answered Apr 19, 2012 at 20:41

Roger

7,6505 gold badges44 silver badges65 bronze badges

Comments

cbacelar · Accepted Answer · 2012-04-19 20:45:44Z

0

I guess the better way is:

var placeholderText = $('input');

$(placeholderText).focus(function() {
    phTextVal = $(this).val();
    $(this).val("");
}).blur(function() {
    $(this).val(phTextVal);
});

edited Apr 19, 2012 at 20:45

answered Apr 19, 2012 at 20:39

cbacelar

5539 silver badges21 bronze badges

Comments

Rahen Rangan · Accepted Answer · 2012-04-19 21:15:36Z

0

How about using object.defaultValue property?

function:

$.fn.smartInput=function(){
    return this.each(function(i,o){
     $(o).focus(function(){ if(this.value==this.defaultValue) this.value='';})
         .blur(function(){ this.value=(this.value=='')?this.defaultValue:this.value;});
     });

}

usage:

$('input').smartInput();

edited Apr 19, 2012 at 21:15

answered Apr 19, 2012 at 21:10

Rahen Rangan

7155 silver badges8 bronze badges

Collectives™ on Stack Overflow

how do I clear the values in my text input fields?

6 Answers 6

4 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related