作者dinos (守護神)
看板Ajax
標題Re: [討論] placeholder js 版
時間Fri Apr 27 14:30:16 2012
※ 引述《kerash (K.T)》之銘言：
: 在 html5 可以使用 placeholder 讓輸入框有提示需輸入內容的功能
: 在這之前大多數的 placeholder 都是用 js 判斷預設內容
: 例如:
: 若 value 為 placeholder 的文字，就加入做為 placeholder 的 class
: 反之就把預設內容清除並且把 class 消除
: 由於這種狀況在遇到必填資料時，若判斷內容是否為空時會很麻煩
: 得再多一次判斷內容是否為預設文字之類的方法
: (雖然用 jQuery 去加入事件也很快啦QQ)
: 個人因為想當作學習也想製作自己的解決方案
: 所以參照了 hotmail 的登入方式，
: 用 div 蓋上去的方法來做假的 placeholder
: 並且想讓所有設定的東西一次套用上，
: 因此就嘗試自己初學寫一個 jQuery 的 plug-in
: 一方面當做紀錄，一方面想請大家指導一下我的 code 有哪些需要改進的部分
: 因為說實在話我的觀念都是網路拼拼湊湊，難免會錯誤
: 所以一邊學習一邊請教大家指導了 m(_ _)m
: 以下是網址
: http://kerash.net16.net/work/placeholder/v1_1/placeholder_v1_1.html
: (原本有 v1.0 版，純用 js 語法寫出來的，但是因為意外刪除CODE後就回不來了QQ..)
這樣跟 html5 的相容性會不會比較好一點？
若 value 為空，則塞入 placeholder
var has_placeholder=('placeholder' in _d.createElement('input'))?true:false;
if(!has_placeholder){
$('[placeholder]').blur(function(){
var $this=$(this);
var placeholder=$this.attr('placeholder');
var value=$this.val();
if(value==''){$this.val(placeholder);$this.addClass('placeholder');}
}).focus(function(){
var $this=$(this);
var placeholder=$this.attr('placeholder');
var value=$this.val();
if(value==placeholder){$this.val('');$this.removeClass('placeholder');}
}).blur();
$('form').submit(function(){
var req=0;
$(this).find('[placeholder]').each(function(){
var $this=$(this);
if($this.val()==$this.attr('placeholder')){$this.val('');}
if($this.attr('req') && $this.val()==''){req++;}
});
if(req>0){
$(this).find('[placeholder]').each(function(){
var $this=$(this);
if($this.val()==''){
$this.val($this.attr('placeholder'));
$this.addClass('placeholder');
}
});
return false;
}
});
}
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 175.181.51.65
1F：推 kerash:基本上新的版本(還沒傳)已經把 placeholder 的判斷加入了 04/27 14:50
2F：→ kerash:另外我不去把 placeholder 加在 input 的 value 前面有說過 04/27 14:51
3F：→ kerash:純粹只是判斷方便而已@@ (就如你的CODE，要判斷是否等於 04/27 14:51
4F：→ kerash:placeholder 的值很方便沒錯..) 04/27 14:51
5F：→ kerash:不過很感謝分享，另外focus時HTML的placeholder 不會消失 04/27 14:52
6F：→ kerash:我以我把事件改成 keydown 了 :D 04/27 14:53
7F：→ kerash:勘正.. placeholder 只有在 chrome 才不會預先消失QQ 04/27 16:32
加上黃色那一段應該是可行的?
※ 編輯: dinos 來自: 211.76.43.193 (04/28 08:35)
8F：推 kerash:恩恩 其實方法應該都是一樣的，我在想能不能再加一些功能 04/28 10:48
9F：→ kerash:w3 的 placeholder 解釋的不多，不確定有沒有漏缺@@ 04/28 10:49
10F：→ TonyQ:操作 value 的缺點是跟其他 plugin 的相容性會變低 04/28 18:00