DOM Scripting - Hide / Show form input text

bronzemonkey · February 16, 2008

In the HTML forum someone asked how to remove /add the default text within form inputs onfocus / onblur. The answers provided used javascript within the html document, and since I'm trying to learn DOM scripting, I wanted to achieve the same results without mixing markup and behaviour.

I've got something that works but which seems long-winded. I wanted to post it here to see if anyone could point out the mistakes I've made and how I might be able to do this with an abstract function so that it could be applied to any number of inputs within the document.

This is what I've got (just c&p all the code)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Document</title>

<script type="text/javascript">

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}


function inputHidePass() {
if(!document.getElementById) return false;
var elem = document.getElementById("pass");
if (elem.value == ("Password")) {
	elem.onfocus = function() {
		elem.value = "";
	}
}
else if (elem.value == ("")); {
	elem.onblur = function() {
		elem.value = "Password";
	}
}
}

function inputHideUser() {
if(!document.getElementById) return false;
var elem = document.getElementById("email");
if (elem.value == ("Username")) {
	elem.onfocus = function() {
		elem.value = "";
	}
}
else if (elem.value == ("")); {
	elem.onblur = function() {
		elem.value = "Username";
	}
}
}

addLoadEvent(inputHidePass);
addLoadEvent(inputHideUser);

</script>

</head>

<body>
  
<form method="post" action="index.php">
  	<input type="text" id="pass" name="pass" value="Password" />
    <input type="text" id="email" name="email" value="Username" />
	<input type="submit" id="send" name="send" value="Login" />
</form>

</body>
</html>

This is the type of thing I was trying to do (but was getting "elem has no properties" errors):

function inputTextShowHide(target,text) {
if(!document.getElementById) return false;
var elem = document.getElementById(target);
if (elem.value == (text)) {
	elem.onfocus = function() {
		elem.value = "";
	}
}
else if (elem.value == ("")); {
	elem.onblur = function() {
		elem.value = text;
	}
}
}

inputHideShow("pass","Password");
inputHideShow("email","Username");

addLoadEvent(inputHideShow);

Any tips or feedback would be great! Thanks

Sign In

DOM Scripting - Hide / Show form input text

Recommended Posts

bronzemonkey

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information