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

利用JS实现HTML5 placeholder效果

最新推荐文章于 2023-03-10 07:58:23 发布

转载最新推荐文章于 2023-03-10 07:58:23 发布 · 62 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zfyouxi/p/5400659.html

本文详细介绍了如何使用JS实现在HTML5中利用placeholder属性的实现效果，并提供了具体代码示例，包括输入框切换显示password和text模式的实现原理及代码解析。

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

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

先来看一下实现效果：

输入password的时候

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

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

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

<input type="text" id="loginPwd" class="loginText"  value="-登陆password-" 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';
	}
}

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

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