I can make my label inside an input element (my "disappearing text"):
HTML
<input name="firstName" type="text" maxlength="40" value="Enter your first name"
onfocus="if(this.value==this.defaultValue)this.value=''"
onblur="if(this.value=='')this.value=this.defaultValue" />
Then style it so my disappearing text is faded (#333). And style it so when I start to input a value into the field the text is black (#000).
CSS
input[type=text] {
color: #333;
}
input[type=text]:focus {
color: #000;
}
It all works fine until you move onto the next input field. Then the field you just entered a value in changes back to the #333
color. I can see why that happens, but can't quite get to how to keep the value black #000
color if the input field has had a value put into it.
Thanks in advance for the assist and education!
HTML5 brings a handy attribute for the <input>
tag called placeholder
which enables native support of this functionality.
<input type="text" placeholder="Search..." />
All latest browsers support this, IE9 and below don't however .
<label>
Note that the placeholder attribute is not a replacemenr for the <label>
tag which every input should have, make sure you include a label for the <input>
even if it's not visible to the user.
<label for="search">Search</label>
<input id="search" placeholder="Search..." />
The above <label>
can be hidden so it's still available to assistive technologies like so:
label[for=search] {
position:absolute;
left:-9999px;
top:-9999px;
}
Here is a potential cross-browser solution, I've moved the code out of the tag and into script tags and then used the class placeholder
to indicate when to fade the text.
HTML
<input name="firstName" type="text" maxlength="40" value="Enter your first name"
class="placeholder" id="my-input" />
CSS
input[type=text].placeholder {
color: #999;
}
JS
<script type="text/javascript">
var input = document.getElementById('my-input');
input.onfocus = function () {
if (this.value == this.defaultValue && this.className == 'placeholder') {
this.value = '';
}
this.className = '';
};
input.onblur = function() {
if (this.value == '') {
this.className = 'placeholder';
this.value = this.defaultValue;
}
};
</script>
input[type=text]
We can extend the above solution to apply to all input[type=text]
by using document.getElementsByTagName()
, looping through them and checking the type
attribute with element.getAttribute()
.
var input = document.getElementsByTagName('input');
for (var i = 0; i < input.length; i++) {
if (input[i].getAttribute('type') === 'text') {
input[i].onfocus = inputOnfocus;
input[i].onblur = inputOnblur;
}
}
function inputOnfocus () {
if (this.value == this.defaultValue && this.className == 'placeholder') {
this.value = '';
}
this.className = '';
}
function inputOnblur() {
if (this.value == '') {
this.className = 'placeholder';
this.value = this.defaultValue;
}
}
This appears to work xbrowser using a combination of jQuery and the Modernizer library.
Requires the jQuery and Modernizer Libraries be on the site and properly referenced.
HTML
<head>
<script src="jquery-1.9.1.min.js"></script>
<script src="modernizr.js"></script>
<script>
$(document).ready(function(){
if(!Modernizr.input.placeholder){
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
</script>
</head>
<body>
<form>
<input name="firstName" type="text" maxlength="40" placeholder="Enter your first name">
</form>
CSS
input[type=text] {
color: #000;
}
input[type=text].placeholder {
color: #666;
}
SOURCE: http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.