Today I'm going to take you on a trip down memory lane, to a time before HTML5. In particular, we're going to explore the placeholder attribute, which was introduced by HTML5.
What does it do?
Glad you asked! When added to a text field, it displays the specified text in greyed-out font, by default, as a hint. The concept of placeholder text is not new, but it used to involve more. Let me show you what I mean. Let's look at the HTML here. Does it have a placeholder attribute?
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Placeholder</title>
</head>
<body>
<input id="txtSearch" maxlength="50" value="search" placeholder="search" >
<input type="button" value="Go" >
</body>
</html>
<html>
<head>
<title>HTML5 Placeholder</title>
</head>
<body>
<input id="txtSearch" maxlength="50" value="search" placeholder="search" >
<input type="button" value="Go" >
</body>
</html>
Now, when you run the page, it shows a search textbox with a button (which, for the purpose of this tutorial, does nothing but look pretty. Kind of like Kim Kardashian). Click on the textbox and the word "search" disappears. When you fill in the text, it's in black. When you click elsewhere, if there's text in the box, it remains black. If there's no text, the word "search" appears again and goes grey.
The time before HTML5
Now I'm going to show you what developers did before HTML5 introduced this useful little attribute. Use the same HTML, but leave out the placeholder attribute. Instead, add a class and call it notext. Add the styles as well, in the head tag. By default, the txtSearch text box is styled as noclass. It will only be styled as textentered when you, well, enter text.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Placeholder</title>
<style>
.notext {color:#999999;}
.textentered {color:#000000;}
</style>
</head>
<body>
<input id="txtSearch" maxlength="50" class="notext" value="search">
<input type="button" value="Go" >
</body>
</html>
<html>
<head>
<title>HTML5 Placeholder</title>
<style>
.notext {color:#999999;}
.textentered {color:#000000;}
</style>
</head>
<body>
<input id="txtSearch" maxlength="50" class="notext" value="search">
<input type="button" value="Go" >
</body>
</html>
Add the onfocus and onblur events. On either, you will call the same function, but with a different argument.
More on the onfocus event. (http://www.w3schools.com/jsref/event_onfocus.asp)
More on the onblur event. (http://www.w3schools.com/jsref/event_onblur.asp)
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Placeholder</title>
<style>
.notext {color:#999999;}
.textentered {color:#000000;}
</style>
</head>
<body>
<input id="txtSearch" maxlength="50" class="notext" value="search" onfocus="tt_placeholder(1);" onblur="tt_placeholder(0);" >
<input type="button" value="Go" >
</body>
</html>
<html>
<head>
<title>HTML5 Placeholder</title>
<style>
.notext {color:#999999;}
.textentered {color:#000000;}
</style>
</head>
<body>
<input id="txtSearch" maxlength="50" class="notext" value="search" onfocus="tt_placeholder(1);" onblur="tt_placeholder(0);" >
<input type="button" value="Go" >
</body>
</html>
Now add the tt_placeholder() function.
<head>
<title>HTML5 Placeholder</title>
<style>
.notext {color:#999999;}
.textentered {color:#000000;}
</style>
<script>
function tt_placeholder(varfocus)
{
var searchbox=document.getElementById("txtSearch");
if (varfocus==1)
{
if (searchbox.className=="notext")
{
searchbox.value="";
searchbox.className="textentered";
}
}
else
{
if (searchbox.value=="")
{
searchbox.value="search";
searchbox.className="notext";
}
}
}
</script>
</head>
<title>HTML5 Placeholder</title>
<style>
.notext {color:#999999;}
.textentered {color:#000000;}
</style>
<script>
function tt_placeholder(varfocus)
{
var searchbox=document.getElementById("txtSearch");
if (varfocus==1)
{
if (searchbox.className=="notext")
{
searchbox.value="";
searchbox.className="textentered";
}
}
else
{
if (searchbox.value=="")
{
searchbox.value="search";
searchbox.className="notext";
}
}
}
</script>
</head>
We'll use a nested If-else block for this. First, grab txtSearch as an object.
Then check if the argument entered in the function is 1 or 0. It's 1 if txtSearch is focused, and 0 if not.
If txtSearch is focused and the class is notext (meaning no text has been entered yet), the word "search" disappears.
Try it!
Also, the class is changed to textentered and any text you enter will be in black.
The code checks if any text has been entered. If so, it leaves well enough alone. But if not, it reverts to its original state, with the value "search" in the text box, in greyed font. Check it out! Clear the text in the textbox and click somewhere else!
How is this useful?
It ain't. Most browsers now render the placeholder attribute quite handily. This is just to give you an appreciation of how much code you save typing every time you use the placeholder attribute. One of the driving maxims behind HTML5 is "less code, more markup". This has led to one of the most frequently-used pieces of code ever, being encapsulated into a HTML attribute for your convenience.
All clear? Don't be blur. Focus!
T___T
T___T
No comments:
Post a Comment