HTML 5 <input> placeholder 属性

最新推荐文章于 2024-04-17 00:32:56 发布

赵修杰

最新推荐文章于 2024-04-17 00:32:56 发布

阅读量3.3k

点赞数

分类专栏： JS Html 文章标签： html5 登录框输入框js placeholder

本文链接：https://blog.csdn.net/shouhou_bingo/article/details/26384365

版权

JS 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

Html

3 篇文章 0 订阅

订阅专栏

今天老大让我研究一下像百度、163邮箱登录时输入框的JS效果。就是，输入框中的提示并不是在鼠标点上去focus之后就消失，而是输入字符之后才消失。因为我们之前做的一直是click和blur切换时的js判断。像如下代码，鼠标点击之后提示就消失了。这样的话跟百度、网易这些大佬不一样，显得不专业，呵呵，所以想试着改一下...

	$("#loginName").focus(function(){
			$("#errorTip").text("");
			if($(this).val()=="账号"){
				$(this).val("");
			}
		});
		$("#loginName").blur(function(){
			var tempStr=$(this).val();
			tempStr=$.trim(tempStr);
			if(tempStr.length==0){
				$(this).val("账号");	
			}
			else {
				$(this).val($.trim($(this).val()));	
			}
		});

我就F12看了一下它们的源代码，发现它们的输入框中的提示信息是放在<input>标签前面（或后面）的<label>，然后用css调到输入框相应位置的！！！

这样的话，就得监控输入框是否输入值。onchange是不行的，因为onchange是要光标移出输入框之后才会触发。看163邮箱的源码没看懂，按我自己的理解，它用的是fEventListen()，而它这个fEventListen（）函数是怎么定义的我没查出来。

然后就在网上搜到了一篇《js监听输入框值的即时变化onpropertychange、oninput》（http://www.jb51.net/article/27684.htm ）。简单试了一下，实现了，可以用。代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk2312" />
    <title>登录页面</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <style type="text/css">
    	.placeholder{
    		text-align:middle;
		  	vertical-align:middle;
		  	position:absolute;
		  	left:15px;
		  	top:10px;
		  	font-size:12px;
		  	color:gray;
		  	display:block;
    	}
    	.pwdplaceholder{
    		text-align:middle;
		  	vertical-align:middle;
		  	left:15px;
		  	top:33px;
		  	font-size:12px;
		  	color:gray;
		  	position:absolute;
    	}
    </style>
  </head>
  <body>
  	<form>
  		<div>
  			<input type="text" title="请输入账号" name="loginName" id="loginName" value=""
  			οninput="contentChange()" onpropertychange="contentChange()" maxlength="50" autocomplete="off" />
  			<label class="placeholder" id="idplaceholder" for="loginName">帐号/邮箱/手机号</label>
  		</div>
  		<div>
  			<input type="password" title="密码" name="password" id="password" value=""
  			 οninput="passwordChange()" onpropertychange="passwordChange()" maxlength="50" />
  			 <label class="pwdplaceholder" id="pwdplaceholder" for="password">密码</label>
  		</div>
  	</form>
  </body>
</html>

<script type="text/javascript">
	$(document).ready(function(){
		$("#idplaceholder").dblclick(function(){
			$("#loginName").focus();
		});
		$("#pwdplaceholder").dblclick(function(){
			$("#password").focus();
		});
	});
</script>

<script type="text/javascript">
	function contentChange(){
		var userName=$("#loginName").val();
		if(userName!=""){
			$("#idplaceholder").hide();
		}
		else{
			$("#idplaceholder").show();
		}
	}
	
	function passwordChange(){
		var password=$("#password").val();
		if(password!=""){
			$("#pwdplaceholder").hide();
		}
		else{
			$("#pwdplaceholder").show();
		}
	}
</script>

然后老大说，要是这样的话，跟现在用的差别有点儿太大，还需要美工做样式之类的，一时半会儿弄不完。就又让我看 http://www.vko.cn/ 的登录页面。

一看这个页面的源码，发现label什么的全没有，就有一个placeholder =“邮箱/手机号”。这个placeholder 是何方神圣恕我见识太少，还从没听说过。百度了一下，看了一下W3School的介绍（http://www.w3school.com.cn/html5/att_input_placeholder.asp）不由惊叹：有了这么一个属性，能少写多少JS呀！！

<!DOCTYPE html>
<html>
  <head>
<span style="white-space:pre">	</span><title>登录页面</title>
  </head>
  <body>
	<form>
	  <div>
	  	<input type="text" title="请输入账号"  id="loginName" placeholder="帐号/邮箱/手机号" value="" maxlength="50" autocomplete="off" />
	  </div>
	  <div>
	  	<input type="password" title="密码" id="password" placeholder="密码" value="" maxlength="50" />
	  /div>
	</form>
  </body>
</html>

不过，美中不足的是，这个属性在IE和火狐下的实现效果不一样，在IE下还是会鼠标一点上去，提示信息就消失。这个如何才能兼容，还没搜，不知道。

回头再看一下百度的，发现人家是既有label实现的，也有这个placeholder 属性。具体试了一下是，在IE下label起作用，而在火狐下placeholder 起作用。而网易就稍逊一筹了，网易只有label，没有placeholder。

像百度这种大佬也只是这样“兼容”，看来要搜到更简单解决方案的希望有点儿渺茫了。明天回来再瞅瞅谷歌之类外国的大佬是怎么搞的吧。

话说回来，看来学技术还得多了解些最新的技术成果啊，不与时俱进，稍不留神就被甩到后面了，不但麻烦（比如说我们现在的登录框），甚至是落伍被淘汰呀！