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.
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).
the value of your field will never be the placeholder text, for instance. Never heard of this. I always learn something new in SO . +1. I couldnt reproduce it though. Can you please create a fiddle showing that ?
placeholder does (demo). It isn't a value that's being set and unset, it is simply a string of text that is being shown in the absence of a value.
placeholder is the best pratice in this type of situations. +1 for the placeholderplaceholder is certainly the preferable in this situation, and it's what I'm recommending in my answer as well. IE was rather late to implement it (not until v 10 if I recall correctly), but the link in my answer contains a shim for older versions.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>
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"/>
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/
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");
}
});
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!