积跬步，聚小流-------js实现placeholder的效果

浏览数：42 / 时间：2015年06月09日

前几天在“技术问答”上问了问题，然后有回复一句话就给概括了：placeholder的效果，不得不说，了解的多了才能说起来言简意赅，用最简单的语言描述最清晰的表达。

但是placeholder属于html5新添加的属性，兼容性还存在问题，查阅思考后，用js实现了它的实现效果。

先来看一下实现效果：

输入密码的时候

这就实现了效果了啊，然后呢，你发现上下图的区别了么，是不是一下子就想到了实现的方法，是的，就这么简单，来简单说一下是实现的原理：

在“登录邮箱”下，放两个input，其中一个是text，另一个是password，当点击的时候显示password，离开的时候显示text，这样就实现了，当然这里有个细节一定要注意，那就是更换显示的input时，注意“聚焦”哦

好了来看一下实现的代码：

<input type="text" id="loginPwd" class="loginText"  value="-登录密码-" onclick="change()" onmouseover=this.focus();this.select();>
<input type="password" name="loginPwd" id="realPwd" style="display: none;" class="loginText" onBlur="back()">

首先，将password和text都罗列上，让password先保持display为none，点击的时候调用js

function change(){
	document.getElementById("loginPwd").style.display='none';
	document.getElementById("realPwd").style.display='inline';
	document.getElementById("realPwd").focus();
}

然后，如果想返回初始状态的话，就调用back()方法

function back(){
	var msg=document.getElementById("realPwd").value;
	if(msg.length==0){
		document.getElementById("loginPwd").style.display='inline';
		document.getElementById("realPwd").style.display='none';
	}
}

如果判定没有输入值，并且失去焦点的时候就要返回最初的状态，这样就得到想要的效果了啊。

真的很感谢前几天给我提示的两个哥们，发现真的很多时候是不知道该如何搜索，知道想要的效果，但是不知道该如何更有效的表达，然后进行搜索，导致难度凭空涨了好几个点，还是需要多学习啊，加油...