今天老大讓我研究一下像百度、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。
像百度這種大佬也只是這樣“兼容”，看來要搜到更簡單解決方案的希望有點兒渺茫了。明天回來再瞅瞅谷歌之類外國的大佬是怎麼搞的吧。
話說回來，看來學技術還得多瞭解些最新的技術成果啊，不與時俱進，稍不留神就被甩到後面了，不但麻煩（比如說我們現在的登錄框），甚至是落伍被淘汰呀！