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

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

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

先来看一下实现效果：

输入password的时候

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

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

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

<input type="text" id="loginPwd" class="loginText" value="-登陆password-" οnclick="change()" οnmοuseοver=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';} }
假设判定没有输入值，而且失去焦点的时候就要返回最初的状态。这样就得到想要的效果了啊。

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

转载于:https://www.cnblogs.com/zfyouxi/p/5400659.html

总结

以上是生活随笔为你收集整理的积跬步，聚小流-------js实现placeholder的效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。