How to make sure this text input value works without javascript?
OK, So I am making a search box that has a value that goes away on click and comes back if you click away from the search box. Like the stackoverflow search but If you click off the search, the value comes back. I hope I'm being clear ( I know very little about javascript )... But For the users that don't have javascript enabled, how do I just make it a blank input? Here's my code
<INPUT type="text" name="q" value="Search using Business Name or Category..." onFocus="if(this.value == 'Search using Business Name or Category...') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Search using Business Name or Category...';}" />
I thought that maybe I should do a php if开发者_开发百科 javascript enabled but I looked and couldnt find any php scripts? Any help would be greatly appreciated.
Use the placeholder
attribute, please!
<INPUT type="text" name="q" placeholder="Search using Business Name or Category..." value="" />
Then use feature detection with JavaScript to make the placeholder work for browsers without support for the placeholder attribute.
For example, using Moderlizr with jQuery (untested):
// Add placeholder support for browsers which don't support it.
// TODO Special styling.
if (!Modernizr.input.placeholder) {
$('input[placeholder][value=]')
.each(function () {
var $this = this;
$this.val($this.attr('placeholder'));
})
.focus(function () {
var $this = this;
if ($this.val() === $this.attr('placeholder')) {
$this.val('');
}
})
.blur(function () {
var $this = this;
if ($this.val() === '') {
$this.val($this.attr('placeholder'));
}
});
}
Set the initial value with JavaScript (this assumes you have an ID):
// Somewhere near the bottom of your document
document.getElementById("q").value = "Search...";
Personally I lean towards using a separate element floating on top of the input for stuff like this though, as I think modifying the value for this is a dirty trick.
精彩评论