Re: [討論] placeholder js 版

[dinos (守護神)]

※ 引述《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
推 kerash:基本上新的版本(還沒傳)已經把 placeholder 的判斷加入了
→ kerash:另外我不去把 placeholder 加在 input 的 value 前面有說過
→ kerash:純粹只是判斷方便而已@@ (就如你的CODE，要判斷是否等於
→ kerash:placeholder 的值很方便沒錯..)
→ kerash:不過很感謝分享，另外focus時HTML的placeholder 不會消失
→ kerash:我以我把事件改成 keydown 了 :D
→ kerash:勘正.. placeholder 只有在 chrome 才不會預先消失QQ
加上黃色那一段應該是可行的?
※ 編輯: dinos           來自: 211.76.43.193        (04/28 08:35)
推 kerash:恩恩 其實方法應該都是一樣的，我在想能不能再加一些功能
→ kerash:w3 的 placeholder 解釋的不多，不確定有沒有漏缺@@
→ TonyQ:操作 value 的缺點是跟其他 plugin 的相容性會變低