Capítulo 17

Formulários - focus e blur

JavaScript

<script type="text/javascript">
window.onload = function() {
	var fdemo = document.getElementById("fdemo");
	var EventUtil = {
	addHandler: function(element, type, handler) {
			if(element.addEventListener) {
				element.addEventListener(type, handler, false);
			} else if (element.attachEvent) {
				element.attachEvent("on" + type, handler);
			} else {
				element["on" + type] = handler;
			}
		}
}
var campoNome = document.forms[0].nome;
var dica = document.getElementById("dica")
EventUtil.addHandler(campoNome, "focus", function(event) {
	campoNome.style.background = "#ffc";
	dica.innerHTML = "Dica para preenchimento do campo";
});
EventUtil.addHandler(campoNome, "blur", function(event) {
	campoNome.style.background = "";
	dica.innerHTML = "";
});
}
</script>

HTML

...
<form  action="http://www.maujor.com"  id="fdemo" method="get">
<label for="nome">Nome:<span id="dica"></span></label>
<input type="text" id="nome" name="nome" />
</form>
...