jquery clear input default value

Question

How can I clear the default value of an input form onfocus with jquery and clear it again when tha submit button is pressed?

<html>
        <form method="" action="">
            <input type="text" name="email" value="Email address" class="input" />
            <input type="submit" value="Sign Up" class="button" />
        </form>
</html>

<script>
$(document).ready(function() {
    //hide input text
    $(".input").click(function(){
        if ($('.input').attr('value') == ''){
            $('.input').attr('value') = 'Email address'; alert('1');}
        if  ($('.input').attr('value') == 'Email address'){
            $('.input').attr('value') = ''}
    });
});
</script>

Could you use the native `placeholder` attribute instead? There are various [polyfills](https://github.com/jamesallardice/Placeholders.js) available to make it work in older browsers. — James Allardice, Aug 01 '12 at 08:09
@JamesAllardice Why you not posted it as an answer? I think is the easiest and best solution. — jelies, Aug 01 '12 at 08:16
@jelies - I didn't post it as an answer because while it does the same thing as what the OP is trying to do, it doesn't really answer what's wrong with their code. But I agree, it is definitely the easiest solution! — James Allardice, Aug 01 '12 at 08:21
Yes it is a good answer and I have upvoted it, but I do not want to use the placeholder tag. — viktor, Aug 01 '12 at 10:34

score 135 · Accepted Answer · edited Dec 06 '16 at 07:49

135

You may use this..

<body>
    <form method="" action="">
        <input type="text" name="email" class="input" />
        <input type="submit" value="Sign Up" class="button" />
    </form>
</body>

<script>
    $(document).ready(function() {
        $(".input").val("Email Address");
        $(".input").on("focus", function() {
            $(".input").val("");
        });
        $(".button").on("click", function(event) {
            $(".input").val("");
        });
    });
</script>

Talking of your own code, the problem is that the attr api of jquery is set by

$('.input').attr('value','Email Adress');

and not as you have done:

$('.input').attr('value') = 'Email address';

edited Dec 06 '16 at 07:49

rj487

4,476
6
47
88

answered Aug 01 '12 at 09:57

Kaustubh

1,475
2
12
12

I have decided to use this answer as it seems the most elegant. – viktor Aug 01 '12 at 10:33
1

thnx.i myself am new to jquery.this is my 1st accepted anser here,and third overall(as you can probably deduce by my reputation points) – Kaustubh Aug 01 '12 at 10:53
Why `$('.input').removeAttr('value')` does not work? – Almino Melo Nov 04 '15 at 17:19

Sasha · Answer 2 · 2015-08-12T07:59:21.353

18

$(document).ready(function() {
  //...
//clear on focus
$('.input').focus(function() {
    $('.input').val("");
});
   //clear when submitted
$('.button').click(function() {
    $('.input').val("");
});

});

edited Aug 12 '15 at 07:59

answered Aug 01 '12 at 08:12

Sasha

1,676
1
16
18

This is wrong `$('.input').attr('value') = 'Email address';`, should be `$('.input').attr('value', 'Email address');` how is this answer upvoted? – Toni Michel Caubet Aug 11 '15 at 11:49
1

@ToniMichelCaubet Edited the answer, thank you. That code wasn't related to the question anyway. I copied it from topicstarter's code. – Sasha Aug 12 '15 at 08:00

score 9 · Answer 3 · answered Aug 01 '12 at 08:11

9

$('.input').on('focus', function(){
    $(this).val('');
});

$('[type="submit"]').on('click', function(){
    $('.input').val('');
});

answered Aug 01 '12 at 08:11

Faust

15,130
9
54
111

score 8 · Answer 4 · edited Dec 13 '18 at 11:51

8

Unless you're really worried about older browsers, you could just use the new html5 placeholder attribute like so:

<input type="text" name="email" placeholder="Email address" class="input" />

edited Dec 13 '18 at 11:51

AntonChanning

509
2
13
37

answered Aug 01 '12 at 08:12

DJ Forth

1,518
2
18
26

2

"Unless your really worried about older browser"... you can polyfill the `placeholder` attribute so it works in older browsers too. See my comment on the question, and see the [Modernizr wiki](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) for other examples. – James Allardice Aug 01 '12 at 08:14
Yeah that's true, or you could just write a bit of JQuery to pull the attribute yourself if your keen. – DJ Forth Aug 01 '12 at 09:30

score 3 · Answer 5 · answered Aug 01 '12 at 08:10

Try that:

  var defaultEmailNews = "Email address";
  $('input[name=email]').focus(function() {
    if($(this).val() == defaultEmailNews) $(this).val("");
  });

  $('input[name=email]').focusout(function() {
    if($(this).val() == "") $(this).val(defaultEmailNews);
  });

score 2 · Answer 6 · answered Aug 21 '15 at 19:11

2

Just a shorthand

$(document).ready(function() {
    $(".input").val("Email Address");
        $(".input").on("focus click", function(){
            $(this).val("");
        });
    });
</script>

answered Aug 21 '15 at 19:11

Toni Michel Caubet

19,333
56
202
378

jquery clear input default value

6 Answers6