Posted By

stavelin on 09/25/08

Tagged

Versions (?)

Last Edited at 09/25/08 09:19am

Statistics

Viewed 1003 times

Favorited by 5 user(s)

Related snippets

Placeholder text on fields (html, css, jquery)

/ Published in: Other

This is basically the code given in the book "learning jQuery " by Chaffer J & Swednerg K.

Highlighted TextExpand

============
 = The CSS  =
 ============
#stikkord{
	width: 300px;
	margin-bottom: 10px;
}
.placeholder {
	color:#999999;
	}	
.tag{
	background-color: yellow;
	font-size: 200%;
	margin:2px;
	line-height:1.2;
	}

===================
 = The jQuery code =
 ===================	
	
	$(document).ready(function() {
	  var searchLabel = $('#tagsform form label').remove().text();
	  $('#stikkord').addClass('placeholder').val(searchLabel).focus(function() {
	    if (this.value == searchLabel) {
	      $(this).removeClass('placeholder').val('');
	    };
	  }).blur(function() {
	    if (this.value == '') {
	      $(this).addClass('placeholder').val(searchLabel);
	    };
	  });
	  $('#tagsform form').submit(function() {
	    if ($('#stikkord').val() == searchLabel) {
	      $('#stikkord').val('');
	    }
	  });
	});

=================
 = The HTML form =
 =================
	<div id="tagsform">	
		<form>
		<label for="stikkord">Skriv inn beskrivende stikkord</label>
		<input type="text" name="stikkord" id="stikkord" />
		<input type="submit" value="Ok" name="inputTagsButton" id="inputTagsButton" />
		</form>
	</div>

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.