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";
}
}