Password int on Textfield - NO jQuery/CSS3/HTML5

Question

<input type="text" name="theName" value="password"
onblur="if(this.value == ''){ this.value = 'password'; this.style.color = '#333'; this.type="text";}"
onfocus="if(this.value == 'password'){ this.style.color = '#666';}"
onkeypress="if(this.value == 'password'){ this.value = ''; this.style.color = '#000';this.type="password";}"
style="color:#BBB;" />

Like this, if the textfield is onfocus but not a thing is been written on it, the DefaultValue will be visible with a lighter color. (more like the facebook search bar)... But id doesn't work... What did i write wrong?

Another thing that i don't get is that if i take this javascript and i put it into a tag like this:

<script type="text/javascript">
function passfocus(){
   if(this.value == 'password'){this.style.color = '#666';}}
function passblur(){
   if(this.value == 'password'){ this.style.color = '#666';}}
function passkey(){
   if(this.value == 'password'){
      this.value = ''; this.style.color = '#000';this.type="password";}}
</script>

And i call this scripts in the textfield like this:

<input type="text" name="theName" value="password" onblur="passblur()"
onfocus="passfocus()" onkeypress="passkey()" style="color:#BBB;" />

Nothing works anymore... I think i kinda messed everything up!!

Answer 1

Why not simply use the placeholder HTML5 attribute?

<input type="text" placeholder="Default value"/>