JS实现placeholder效果

<input type="text" class="login-input-1" id="usernamePlaceholder" value="用户名" onfocus="onfocusPlaceholderInput(this, 'username')" style="color: gray;"/> 
<input name="username" type="text" class="login-input-1" id="username" onblur="onblurRealValueInput(this, 'usernamePlaceholder')" style="display: none;"/> 
<input type="text" class="login-input-1" id="passwordPlaceholder" value="密码" onfocus="onfocusPlaceholderInput(this, 'password')" style="color: gray; "/> 
<input name="password" type="password" class="login-input-1" id="password" onblur="onblurRealValueInput(this, 'passwordPlaceholder')" style="display: none;"/> 

/** 
* 点击placeholder框之后，显示真正的输入框.例如点击密码框的placeholder之后显示密码输入框. 
* placeholderElement 被点击的元素 
* displayElementIdStr 准备显示的元素的id字符串 
*/ 
function onfocusPlaceholderInput(placeholderElement, displayElementIdStr) { 
placeholderElement.style.display = "none"; 
var v_displayElement = document.getElementById(displayElementIdStr); 
v_displayElement.style.display = "block"; 
v_displayElement.value = ""; 
v_displayElement.focus(); 
} 

/** 
* 
* 真正有效值的input框，失去焦点时判断是否显示placeholder 
* 当密码框失去焦点时，进行判断如果密码为空则显示密码placeholder框，否则显示密码框。 
* realValueElement 失去焦点的元素 
* placeholderIdStr 准备显示的placeholder的id字符串 
*/ 
function onblurRealValueInput(realValueElement, placeholderIdStr) { 
if ("" == realValueElement.value) { 
realValueElement.style.display = "none"; 
var v_placeholderElement = document.getElementById(placeholderIdStr); 
v_placeholderElement.style.display = "block"; 
} 
}