Even thou we had HTML5 for quite a while there is a large number of browsers that doesn't support many of its great features. One of the new features of HTML5 is the placeholder attribute of the input tag. In this tutorial I will show you how to do a work around this problem by using jQuery. To start with create a new file inside of the root folder of your new project and call it index.html . Now open this file for editing and copy and paste the following: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8" /> <title>Input placeholder with jQuery</title> <meta name="description" content="Input placeholder with jQuery" /> <meta name="keywords" content="Input placeholder with jQuery" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> </body> </html> In between the opening and closing body tags create the new section tag with the id of wrapper and the new form with the id of search_form like so: <section id="wrapper"> <form action="" method="post" id="search_form"> <label for="search">Search for: </label> <input type="text" name="search" id="search" class="placeholder" title="Type your keyword here..." value="Type your keyword here..." /> </form> </section> The important thing to notice here about our input tag are the class placeholder and the value assigned to the title attribute matching the value of the value attribute. You can now save and close the index.html file and create a new folder called css . Inside of this folder create a file called core.css open it for editing and copy and paste the following css definitions: * { margin: 0; padding: 0; border: none; outline: none; text-decoration: none; } body { font-family: Arial Verdana Sans-serif; font-size: 14px; line-height: 21px; text-align: center; padding: 30px 0; background:#222; } #wrapper { width: 800px; text-align: left; margin: 0 auto; } #search_form { background:#d23286; float:right; padding:10px; } #search_form#search { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } #search_form label#search { float: left; } #search_form label { color:#fff; padding-right:10px; } #search { width:180px; padding:5px; background: #E88DBC; } You can now save and close the core.css . Now create a new folder and call it js . This is the folder where we will be storing our javascript files. Inside of the js folder create a new file and call it core.js . Now go to jQuery website and download the latest minified version of jQuery library. The best way to do it is to right click on the Minified link and choose Save link as but it's absolutely up to you how you're going to do it. Once you've downloaded it put the new jQuery file into the js folder. Now open index.html and after the line which reads: <meta name="keywords" content="Input placeholder with jQuery" /> type the following - pointing to the earlier created core.css file: <link href="/css/core.css" rel="stylesheet" type="text/css" /> Now before the closing body tag include our two .js files by typing the following: <script src="/js/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="/js/core.js" type="text/javascript"></script> Please note that the version of jQuery I'm using is 1.6.2 - make sure you amend the name of the file to match the one you've downloaded earlier . Our entire index.html file should now look similar to this: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8" /> <title>Input placeholder with jQuery</title> <meta name="description" content="Input placeholder with jQuery" /> <meta name="keywords" content="Input placeholder with jQuery" /> <link href="/css/core.css" rel="stylesheet" type="text/css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <section id="wrapper"> <form action="" method="post" id="search_form"> <label for="search">Search for: </label> <input type="text" name="search" id="search" class="placeholder" title="Type your keyword here..." value="Type your keyword here..." /> </form> </section> <script src="/js/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="/js/core.js" type="text/javascript"></script> </body> </html> Next we are going to create the hiding and showing placeholder effect. Open core.js file and start by creating the new Object Literal. We will call our new object inputObject : var inputObject = { } Inside our new object we will now create two methods first one called emptyInp which will be responsible for removing the placeholder text when the cursor enters our text field (on focus): emptyInp : function(obj) { var t = obj.attr('title'); var v = obj.val(); if (v = t) { obj.val(''); } } As you can see above first we are creating two variables - first one takest the value of the attribute title from the current object and the other takes the value of it. Then we simply check whether the two value are the same and if so we remove the value from the field. Second method is called fillInp and will be responsible for putting the placeholder back into the input field when the cursor goes away but only if the current value of the input field is left blank: fillInp : function(obj) { var t = obj.attr('title'); var v = obj.val(); if (v = '') { obj.val(t); } } Our new Object should now look like this: var inputObject = { emptyInp : function(obj) { var t = obj.attr('title'); var v = obj.val(); if (v = t) { obj.val(''); } } fillInp : function(obj) { var t = obj.attr('title'); var v = obj.val(); if (v = '') { obj.val(t); } } } After the last closing curly bracket type: $(function() { $('.placeholder').focus(function() { inputObject.emptyInp($(this)); }); $('.placeholder').blur(function() { inputObject.fillInp($(this)); }); }) The above simply checks if DOM is ready by using a short version of the statement: $(function)() { Then we trigger the relevant method of our newly created object depending on the triggered event. On focus (when the cursor is placed inside of our text field) we want to empty the value therfore we are using emptyInp method and pass the instance of the current object to it as a parameter. The second statement is triggered when the blur event occurs (when the cursor moves away from our text field) and calls the fillInp again - passing current object as a parameter. Our entire core.js file should now have the following content: var inputObject = { emptyInp : function(obj) { var t = obj.attr('title'); var v = obj.val(); if (v = t) { obj.val(''); } } fillInp : function(obj) { var t = obj.attr('title'); var v = obj.val(); if (v = '') { obj.val(t); } } } $(function() { $('.placeholder').focus(function() { inputObject.emptyInp($(this)); }); $('.placeholder').blur(function() { inputObject.fillInp($(this)); }); }) You can now save and close this file - and preview the result in the browser by calling your index.html file. And that's it in this tutorial - good luck! Add a comment Name: * Email: * Website: Twitter: Comment (no html allowed): * Add Comment
Are you aspiring to pursue a course in Mathematics at one of the most prestigious universities in the UK? Then, might be helpful to you.
There are several universities that offer a variety of design innovation courses, so you can find one that is right for your interests and career goal
UAE is an excellent study-abroad destination for students across the world. The best part is that it is affordable and accessible. With these fully-fu
In the ever-evolving landscape of higher education funding in the United Kingdom, a groundbreaking proposal has emerged that could potentially transfo
NEED HELP?
2K Views
Report Spam
9 Answers
