Unknown  
要實現的placeholder的功能:
(類似于新浪微博登陸頁面文字方塊在FF瀏覽器下的表現)
當文本輸入框開始輸入文本時預設文本消失,當刪除了輸入的文本時預設文本出現。(非得到或者失去焦點時出現或消失)
頁面結構:

 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>a.html</title>
</head>
<body>

 

<div class="gform">
<fieldset>
<legend>團購搜索</legend>
<div class="area">
<label for="keyword-search">
<span class="placeholder">請輸入寶貝名稱或連結</span>
<input type="text" value="" class="text-entry" />
</label>
<a href="javascript:void(0)" class="gbtn gbtn-search" title="點擊搜索">搜索</a>
</div>
</fieldset>
</div>
<script src="../jquery.js"></script>
<script src="placeholder.js"></script>
</body> </html>
這樣的頁面結構的好處是:
當javascript失效時,fieldset 和placeholder會顯示出來,更易於使用者體驗。placeholder與input框仍然在同一label下,依然可以實現點擊placeholder的同時input框被選中。
好了,我們想這就是註冊個keyup與keydown的事件判斷一下值而已。
初步的placeholder.js如下:

 

/**
* 文字方塊(input,texteare,password)的focus,keydown等事件添加
*/

 

var addFoucsEvent = function (selecter){

 

$(selecter).live({

 

keydown : function (){
var _this = $(this),
placeholder = _this.siblings('.placeholder');
if (_this.val() == '' && placeholder.length != 0){
placeholder.hide();
};
},
keyup : function (ev){
var _this = $(this),
placeholder = _this.siblings('.placeholder');
if (_this.val() == '' && placeholder.length != 0){
placeholder.show();
}

 

}
});

 

}
addFoucsEvent('.text-entry')

 

測試一下以上代碼,我們欣喜的發現,實現了我們想要的功能。但是一細看,悲劇的發現了一個bug。
在IE系瀏覽器下面,把輸入法調整為中文的時候,輸入第一個字,每按一下就會閃動一次。
(這個閃動的具體bug案例請參見淘寶天貓在IE下的表現)



原因是當拼音或五筆輸入法輸入的時候,我們觸發了keyup和keydown的事件,並且input框內的值都為空。IE又虎,所以就執行了兩個事件,先show出來又hide掉。所以就閃動了。
想了想,在keyup的時候判斷一下鍵值吧。如果按得不是回退鍵或者delete鍵,就不讓placeholder出來,在原來的功能上多加一層判斷。
進化後的代碼如下:

 

/**
* 文字方塊(input,texteare,password)的focus,keydown等事件添加
*/

 

var addFoucsEvent = function (selecter){

 

$(selecter).live({

 

keydown : function (){
var _this = $(this),
placeholder = _this.siblings('.placeholder');
if (_this.val() == '' && placeholder.length != 0){
placeholder.hide();
};
},
keyup : function (ev){
var _this = $(this),
placeholder = _this.siblings('.placeholder');
if (_this.val() == '' && placeholder.length != 0){
if(ev.keyCode == 46 || ev.keyCode == 8){
placeholder.show();
}
}

 

}
});

 

}
addFoucsEvent('.text-entry')



急匆匆的去IE看看是不是問題解決了。
嗯。。確實如此,當輸入中文的時候不再閃動了。
但還是有個小小的bug。。。
輸入中文時確實不閃了,但是當輸入法的框還在,值依然為空時,按回退鍵的時候,依然閃動了,因為我們加的判斷條件就是回退和delete的時候執行。
頓時覺得空前的迷茫,一下子思緒萬千,難道不得不計算我按了多少下並且計算還剩多少個字元神馬神馬的才能真正的實現此效果麼?
傷心的去各大網站上尋找實現類似效果的輸入框。走了一大圈,發現要麼就是對IE做了降級的相容,要麼就是覺得此種小小的bug不需要計較就這樣放在站上。
所以不得不對IE進行單獨的處理。
代碼如下

 

/**
* 文字方塊(input,texteare,password)的focus,keydown等事件添加
*/

 

var addFoucsEvent = function (selecter){

 

$(selecter).live({
focusout : function (){
var _this = $(this),
placeholder = _this.siblings('.placeholder');
if (_this.val() == '' && placeholder.length != 0){
placeholder.show();
};
},
keydown : function (){
var _this = $(this),
placeholder = _this.siblings('.placeholder');
if (_this.val() == '' && placeholder.length != 0){
placeholder.hide();
};
}
});

 

if(!$.browser.msie){
$(selecter).live({
keyup : function (ev){
var _this = $(this),
placeholder = _this.siblings('.placeholder');
if (_this.val() == '' && placeholder.length != 0){
if(ev.keyCode == 46 || ev.keyCode == 8){
placeholder.show();
}
}
}
})
}
}
addFoucsEvent('.text-entry')

 

此時的效果:
在FF等好瀏覽器上,實現當鍵盤按下時placeholder消失,鍵盤抬起時若文字方塊值為空時placeholder顯示的功能。
在IE的坑爹瀏覽器上,實現當鍵盤按下時placeholder消失,文本輸入框失去焦點並且值為空時placeholder顯示的功能。
創作者介紹
創作者 shadow 的頭像
shadow

資訊園

shadow 發表在 痞客邦 留言(0) 人氣()