What's the code to make text low opacity and removed when you type something in the box. The most notable example of this would be on Facebook where it says "What's on your mind?"
0
Low opacity text?
Started by iFengo, Mar 27 2012 01:55 PM
2 replies to this topic
Sponsor:
#2 Members - Reputation: 3818
Posted 27 March 2012 - 02:10 PM
I'm going to assume html here since you're mentioning facebook, (I don't have a FB account though).
you can control the opacity of text and other elements using CSS (the opacity property) and change it using
$("#objectID").css({opacity:0.5});
or
$(".className").css({opacity:0.6});
(This is jquery, for normal Javascript it is alot more painful).
To remove the text when the user clicks the textfield you can use (also jquery)
Not however that most likely you don't really want to change the opacity of the textfield, (and you can't AFAIK change the opacity of just the text), most sites just use a greyish textcolor instead.
The defaultvalue plugin that turch linked to looks pretty good (it does the same thing but also restores the default value if you switch away from a textfield without entering any text in it)
you can control the opacity of text and other elements using CSS (the opacity property) and change it using
$("#objectID").css({opacity:0.5});
or
$(".className").css({opacity:0.6});
(This is jquery, for normal Javascript it is alot more painful).
To remove the text when the user clicks the textfield you can use (also jquery)
$('#TextFieldD').focus(function() {
($this).val("");
});
//You can use .FieldClass instead of #ID if you have multiple fields that you want to treat the same way.
Not however that most likely you don't really want to change the opacity of the textfield, (and you can't AFAIK change the opacity of just the text), most sites just use a greyish textcolor instead.
The defaultvalue plugin that turch linked to looks pretty good (it does the same thing but also restores the default value if you switch away from a textfield without entering any text in it)
I don't suffer from insanity, I'm enjoying every minute of it.
The voices in my head may not be real, but they have some good ideas!
The voices in my head may not be real, but they have some good ideas!
#3 Members - Reputation: 580
Posted 27 March 2012 - 02:10 PM
I assume you are talking about HTML.
The standard-ish way to do it is set the value attribute to the message you want displayed, then use javascript to clear it when the element gets focus. You can have a class that makes the text a "low opacity" color (if the bg is white, make the text lighter, if the bg is light blue, make the text light blue-er), which is removed when the element gains focus.
Note that this isn't really good for accessibility, because text-readers read the value of an input when it gains forcus, and you would be deleting the value when the input gains focus, thus the text-reader won't have anything to read.
If you use jQuery, you can use this plugin.
Edit: SimonForsman beat me to it
The standard-ish way to do it is set the value attribute to the message you want displayed, then use javascript to clear it when the element gets focus. You can have a class that makes the text a "low opacity" color (if the bg is white, make the text lighter, if the bg is light blue, make the text light blue-er), which is removed when the element gains focus.
Note that this isn't really good for accessibility, because text-readers read the value of an input when it gains forcus, and you would be deleting the value when the input gains focus, thus the text-reader won't have anything to read.
If you use jQuery, you can use this plugin.
Edit: SimonForsman beat me to it
