Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to show or hide a default value inside a input field with jQuery and CSS

In this article, we will take a look at the process as to how jQuery can be utilized in order to show or hide a default value inside a input field.

With the help of jQuery, it becomes easy to enhance the search bars as well as the form input fields. This is made possible even with simple touches and this really enhances the experience of the user.

Display of the Search bar

Figure1: Display of the Search bar

Here the example that we will be creating incorporates a easy and a simple search bar. Then there will be an icon that appears grey as standard however this turns to be blue when focused. As soon as the field as selected, the default input “I’m looking for” gets disappears.

Let’s try with CSS

The effects discussed above could be created with CSS. We have a pseudo :focusselector that permits to incorporate special styling to elements when they have the user’s attention and in addition to this, we can also add the default input value as a background image. This is then removed making use of the :focus selector.

We need on discuss on the issues while doing this with the help of CSS.

  • Firstly Internet Explorer does not support the :focus selector
  • Secondly we don’t have any other way in order to ensure the default value doesn’t reappear post the input of the information within the input field by the user. This is the step where we witness jQuery taking over in order to provide a complete solution that’s compatible with all browsers.

Creation of a search form

Here we will create a sample form design where we’ll concentrate more on the front-end design of HTML, CSS and Javascript instead of making the form completely functioning. In order to start this, there is a requirement of a basic HTML structure:

Listing 1: Basic HTML Structure displaying form design

<form action=”” method=”get”>
	<fieldset>
		<input type="text" id="searchbar" />
		<input type="submit" value="Search" id="searchbtn" />
	</fieldset>
</form>

Like we have all forms on the web, we will make use of a element in order to create a simple search bar. We have a inside this in order to contain our two input fields. Talking about the first one, it is a text input with an ID of searchbar. This is particularly a field where in the user enters their query. Then we have a submit input element with an ID of searchbtn having a value attribute of “Search”in order to provide a descriptive purpose to the button. The final design will render this input as a magnifying glass icon which replaces the text for a more visual clue.

Listing 2: Code showing Search bar layout

#searchbar {
	width: 425px; 
	float: left; padding: 20px 150px 20px 40px;
	background: #ededed url(bar-bg.png) repeat-x;
	border: 3px solid #c7c7c7;
	border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px;
	font: italic 54px Georgia; color: #898989;
	outline: none; /*Remove Chrome and Safari glows on focus*/
}

We can then have the entire form being styled up with some simple CSS wherein the search bar is given a specific width of 425px with some padding around the edges. The padding adds 20px to the top and bottom, 40px to the left and a large 150px on the right in order to accommodate the button. A thin repeating gradient graphic is incorporated as a background-image and a grey border to the outside. The purpose of the border-radius is to round off the edges of the search bar in order to support browsers else it will appear rectangular. The text inside the field is then set up as 54px Georgia in Italic, with a grey colouring and we have the final line ofoutline: none; altogether removes the default glow appearing on focus in Safari and Chrome.

Listing 3: Form styled with CSS

#searchbar.active {
	background: #ebf3fc url(bar-bg-active.png) repeat-x;
	border: 3px solid #abd2ff;
}

Post this; the search bar is given some styling when the class of active is made use of which will then be added by jQuery later leaving it to the CSS to alter the background-image to a blue gradient with a light blue border.

Listing 4: Styling background image

#searchbtn {
	width: 67px; height: 70px; float: left; margin: 18px 0 0 -115px;
	background: url(search.png); text-indent: -9999px;
	padding: 0 0 0 67px; /*IE fix*/
	cursor: pointer;
}
	#searchbtn:hover {
		background-position: 0 -70px;
	}

You can see the button appearing as an image based icon thereby making a specific width and height to be added. The button is floated alongside the bar and then we have margin which is made use of so as to move it into place 18px from the top. This is done in order to align it vertically and -115px from the left so as to pull it back to sit inside the search bar.

We have the icon been added as a background-image. Text-indent is used to shift the default value text off-screen. One can also make use of padding since this technique is not favoured by Internet Explorer. In order to ensure that the user’s mouse displays the appropriate cursor as feedback for which the element can be clicked, cursor:pointer; displays the typical hand icon.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>

We don’t have any attractive jQuery effects yet added to the search form though it looks and works fine so far for which we have the library being linked from inside the HTML document. Then the document is prepared for our own bit of Javascript where every jQuery command is contained within the same syntax and basically says “When the document is ready, execute this function.”

Listing 5: Function to be executed after ready of the document

$(document).ready(function() {
	$("#searchbar").attr("value", "I'm looking for...");
	
	var text = "I'm looking for...";
	
	$("#searchbar").focus(function() {
		$(this).addClass("active");
		if($(this).attr("value") == text) $(this).attr("value", "");
	});
	
	$("#searchbar").blur(function() {
		$(this).removeClass("active");
		if($(this).attr("value") == "") $(this).attr("value", text);
	});
});

Looking at the first line of our jQuery, it takes the #searchbar and adds the words “I’m looking for…” inside the value attribute. This makes use of the .attr() method and then we have a variable named text is set used along with the code that is used to adjust the input text of focus.

.focus () and .blur() are the two functions then added to the search bar; .focus()for when the input is selected, and .blur() when it is deselected. In case we have the searchbar’s value same as the variable of ‘text’, then the value should be changed to nothing (“ ”). When you deselect the input and the value is blank, the value should revert to the ‘text’ variable. Else you will see the value that the user has manually entered. The advantage of this is that this prevents the value from clearing out the user’s query and switching back to“I’m looking for…” when the input is deselected.



Software Developer from India. I hold Master in Computer Applications Degree and is well versed with programming languages such as Java, .Net, C and C++ and possess good working knowledge on Mobile Platforms as well.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login