DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets Manager

Snippets has posted 5883 posts at DZone. View Full User Profile

Creating Hint/default Text In Javascript (RAW)

05.04.2009

| 2285 views |

        Basically, this chunk of code will cause a text box to have a default/hint text applied to it. When you click on the box the text will disappear, when you blur, the box should return to the default text if it is blank.

<b>Usage:</b>
createDefaultText( obj as object , defaultText as String , defaultTextColor as HexString );

<b>Code:</b>

function defaultText_focus(evt) {
	if (!evt) { evt = window.event; }
	var targ = getEventTarget(evt);
	if(targ.value.toLowerCase() == targ.defaultText.toLowerCase()) {
		targ.style.color = '';
		targ.value = '';
	}
}
			
function defaultText_set(targ) {
	if(targ.value.toLowerCase() == targ.defaultText.toLowerCase() || targ.value.length === 0) {
		targ.style.color = targ.defaultTextColor;
		targ.value = targ.defaultText;
	} else {
		targ.style.color = '';
	}
}
			
function defaultText_blur(evt) {
	if (!evt) { evt = window.event; }
	var targ = getEventTarget(evt);
	defaultText_set(targ);
}
			
function createDefaultText(obj, defaultText, defaultTextColor) {
	obj.defaultText = defaultText;
	obj.defaultTextColor = defaultTextColor;
	addEvent(obj, 'focus',defaultText_focus,false);
	addEvent(obj, 'blur',defaultText_blur,false);
	defaultText_set(obj);
}


<b>Sample:</b>
Uses code from
<a href="http://snippets.dzone.com/posts/show/7288">Event Target</a>
<a href="http://snippets.dzone.com/posts/show/7289">Add Event</a>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Default Text Sample</title>
		<script type="text/javascript">
			function addEvent(elm, evType, fn, useCapture) {
				if (elm.addEventListener) {
					elm.addEventListener(evType, fn, useCapture);
					return true;
				}
				else if (elm.attachEvent) {
					var r = elm.attachEvent('on' + evType, fn);
					return r;
				}
				else {
					elm['on' + evType] = fn;
				}
			}
			
			function getEventTarget(evt) {
				var elem;
				if (evt.target) {
					elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target;
				} else {
					elem = evt.srcElement;
				}
				return elem;
			}


			function defaultText_focus(evt) {
				if (!evt) { evt = window.event; }
				var targ = getEventTarget(evt);
				if(targ.value.toLowerCase() == targ.defaultText.toLowerCase()) {
					targ.style.color = '';
					targ.value = '';
				}
			}
			
			function defaultText_set(targ) {
				if(targ.value.toLowerCase() == targ.defaultText.toLowerCase() || targ.value.length === 0) {
					targ.style.color = targ.defaultTextColor;
					targ.value = targ.defaultText;
				} else {
					targ.style.color = '';
				}
			}
			
			function defaultText_blur(evt) {
				if (!evt) { evt = window.event; }
				var targ = getEventTarget(evt);
				defaultText_set(targ);
			}
			
			function createDefaultText(obj, defaultText, defaultTextColor) {
				obj.defaultText = defaultText;
				obj.defaultTextColor = defaultTextColor;
				addEvent(obj, 'focus',defaultText_focus,false);
				addEvent(obj, 'blur',defaultText_blur,false);
				defaultText_set(obj);
			}
			
			window.onload = function() {
				createDefaultText(document.form1.testInput, 'Enter Search Criteria', '#cccccc');
			};
		</script>
	</head>
	
	<body>
		<form name="form1" action="">
			<input name="testInput" /> <input type="submit" value="go" />
		</form>
	</body>
</html>

Tags: