CODEWITHSUNDEEP
jquerytoggle
Zlatko Soleniq
Zlatko Soleniq

Reputation: 388

Jquery input field value toggle

Hi i have this input field 

<form action="" method="post">
    <input type="text" value="Type Your Email" name="field" class="field"/>
    <input type="submit" value="Submit" class="submit" />
</form>

Im triying to show/hide the value when I click on the field. The problem is that I forgot how to reach to the value i've tried

$('.field').click(function(){

  $('.field value').toggle();

});

but it doesnt work.

Upvotes: 0

Views: 7595

Answers (6)

Alexander Nicholas Popa
Alexander Nicholas Popa

Reputation: 272

Try this http://jsfiddle.net/zander_pope/udu5cchh/

$(function () {
    $('.button').on('click', function (e) {
        if (!$('.dd').val()) {
            $('.dd').val("relevance");
        } else {
            $('.dd').val("");
        }
    });
});
$(function () {
    $('.button').on('click', function (e) {
        $('.search').click();
    });
});

Hope it helps!

Upvotes: 0

Adil Shaikh
Adil Shaikh

Reputation: 44740

Demo

New Placeholder attribute would be the best solution for your problem but please note

The placeholder attribute is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari. Note: The placeholder attribute of the tag is not supported in Internet Explorer 9 and earlier versions.

$('.field').on('focus',function(){

 if($(this).val() == 'Type Your Email') {
      $(this).val('');
   }

});

$('.field').on('blur',function(){
    if($(this).val() == ""){
     $(this).val("Type Your Email");
     }
});

Upvotes: 0

Robert
Robert

Reputation: 20286

You can use pure JS

<input type="text" value="Type Your Email" onfocus="this.value=''" onblur="this.value='Type..'"     name="field" class="field"/>

or 

$(".field").focus(function (){ $(this).val='';});
$(".field").blur(function (){ $(this).val='Type something';});

It is good habit to check if input had value before making changes not to clear what user entered into field.

More info you can find on http://api.jquery.com/focus/ and http://api.jquery.com/blur/

Upvotes: 0

vinothini
vinothini

Reputation: 2604

You can use "placeholder"

What you will give inside placeholder property that will show in text field If you focus in text field that will hide. If you focus out with out type that will show the placeholder value

Example:

<form action="post">
  <input type="text" name="fname" placeholder="First name"><br>
  <input type="text" name="lname" placeholder="Last name"><br>
  <input type="submit" value="Submit">
</form>

Upvotes: 1

yogi
yogi

Reputation: 19619

I think what you are asking for is this

$('.field').on("focus", function () {
    var txt = $(this);
    if (txt.val() == "Type Your Email")
        txt.val("");
});

$('.field').on("blur", function () {
    var txt = $(this);
    if (txt.val() == "")
      txt.val("Type Your Email");
});

Or you can use Placeholder attribute (but it doesn't work on IE)

<input type="text" value="Type Your Email" 
       name="field" class="field" 
       placeholder="Type Your Email"/>

Upvotes: 0

David Hedlund
David Hedlund

Reputation: 129832

You can't show or hide a field value, but you can set it.

You might be looking for something like this:

$('.field').focus(function(){
   if($(this).val() == 'Type Your Email') {
      $(this).val('');
   }
}).blur(function() {
   if($(this).val() == '') {
      $(this).val('Type Your Email');
   }
});

Above, the value is being set on focus and blur rather than when the field is clicked, so that the code still works when you're accessing the field by tabbing or some other means.

However, I would prefer to draw your attention to the html5 attribute placeholder, that does exactly this, but without some undesirable side effects (the value of your field will never be the placeholder text, for instance).

Upvotes: 3

Related Questions