Tuesday, January 03, 2012
MarkupBox
With the update in the version of HTML, i.e., the introduction of
HTML5, the application development on website is now very easy. The new
feature of HTML5 is input and text area fields. The example of it is
Safari’s search box, ‘placeholder’, which adds the default text in text
area, if it is empty. Previously, the developers use JavaScript to
inject some placeholder text in an input field. JavaScript was not
easily accessible, hence the injecting process was difficult. But, with
the coming of HTML5, you can now easily use placeholder attributes to
add text in the input box. Placeholder attributes work with following
input:
Placeholder text also provides the benefit of adding watermark to the text. Refer the below mentioned coding:
<html>
<head>
</head>
<body>
<input type="text" placeholder="Type here" />
<input type="submit" />
</body>
</html>
How to style placeholder color property
Placeholder is being manufactured and styled by vendor. The change in its style is difficult, but one can change the color of property to have normal color between browsers. Below mentioned code can help you in changing the color property of placeholder in HTML5:
::-webkit-input-placeholder { color:#999; }
:-moz-placeholder { color:#999; }
:-ms-input-placeholder { color:#999; }
.placeholder { color:#999; }
jQuery Placeholder Text
All browser support placeholder text except, Opera and Internet Explorer.So, if you want to check whether your browser supports placeholder, Modernizr can be a big help. And when you find that placeholder is not support by your browser, you can take help of jQuery. It stores all the variable that the placeholder attributes requires. And, if the input value is empty, it will add placeholder class to the input field and display placeholder text.
So, if you want this on your site, all you have to do is to download jQuery and Modernizr and then paste following codes in your HTML page:
<script src="jquery.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>
If you don’t want extra styling to your search input field, add the following CSS codes:
input[type=search] {
-webkit-appearance: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
display: none;
}
This is how jQuery help in placeholder text.
How to use placeholder links in live sites
The website navigation lists indicate the user which page of the site they are referring.It is done with the help of ‘you are here’ indicator. This navigation process takes lot of time. But, with placeholder the website developer can use the navigation as per their preference, just by deleting href attribute from the appropriate link.The link is not clickable which help the customers in not getting confused.
Fallback option to older version
If you want to provide fallback option to the older version of your site with the help of placeholder, you can copy-paste the following code in your text box:
if (!elementSupportsAttribute('input', 'placeholder')) {
// Fallback for browsers that don't support HTML5 placeholder attribute
$("#textbox")
.data("originalText", $("#textbox").text())
.css("color", "#999")
.focus(function() {
var $el = $(this);
if (this.value == $el.data("originalText")) {
this.value = "";
}
})
.blur(function() {
if (this.value == "") {
this.value = $(this).data("originalText");
}
});
} else {
// Browser does support HTML5 placeholder attribute, so use it.
$("#textbox")
.attr("placeholder", $("#textbox").text())
.text("");
}
-
Text
-
Search
-
URL
-
Telephone
-
Email
- Password
Placeholder text also provides the benefit of adding watermark to the text. Refer the below mentioned coding:
<html>
<head>
</head>
<body>
<input type="text" placeholder="Type here" />
<input type="submit" />
</body>
</html>
How to style placeholder color property
Placeholder is being manufactured and styled by vendor. The change in its style is difficult, but one can change the color of property to have normal color between browsers. Below mentioned code can help you in changing the color property of placeholder in HTML5:
::-webkit-input-placeholder { color:#999; }
:-moz-placeholder { color:#999; }
:-ms-input-placeholder { color:#999; }
.placeholder { color:#999; }
jQuery Placeholder Text
All browser support placeholder text except, Opera and Internet Explorer.So, if you want to check whether your browser supports placeholder, Modernizr can be a big help. And when you find that placeholder is not support by your browser, you can take help of jQuery. It stores all the variable that the placeholder attributes requires. And, if the input value is empty, it will add placeholder class to the input field and display placeholder text.
So, if you want this on your site, all you have to do is to download jQuery and Modernizr and then paste following codes in your HTML page:
<script src="jquery.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>
If you don’t want extra styling to your search input field, add the following CSS codes:
input[type=search] {
-webkit-appearance: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
display: none;
}
This is how jQuery help in placeholder text.
How to use placeholder links in live sites
The website navigation lists indicate the user which page of the site they are referring.It is done with the help of ‘you are here’ indicator. This navigation process takes lot of time. But, with placeholder the website developer can use the navigation as per their preference, just by deleting href attribute from the appropriate link.The link is not clickable which help the customers in not getting confused.
Fallback option to older version
If you want to provide fallback option to the older version of your site with the help of placeholder, you can copy-paste the following code in your text box:
if (!elementSupportsAttribute('input', 'placeholder')) {
// Fallback for browsers that don't support HTML5 placeholder attribute
$("#textbox")
.data("originalText", $("#textbox").text())
.css("color", "#999")
.focus(function() {
var $el = $(this);
if (this.value == $el.data("originalText")) {
this.value = "";
}
})
.blur(function() {
if (this.value == "") {
this.value = $(this).data("originalText");
}
});
} else {
// Browser does support HTML5 placeholder attribute, so use it.
$("#textbox")
.attr("placeholder", $("#textbox").text())
.text("");
}
MarkupBox.com is a specialized PSD to HTML Conversion Company, backed with years of experience and diligent professionals.MarkupBox offers PSD to CSS, PSD to HTML5 and software implementation services like PSD to Joomla, PSD to Magento , PSD to WordPress,PSD to Drupal, PSD to Email and much more.
Posted in: 
0 comments:
Post a Comment