JQuery 文字框欄位浮水印

測試環境
JQuery版本	jquery-1.11.1.min.js(jquery-2.1.1.min.js也可使用)
測試瀏覽器	IE6.0,Chrome36.0,Firefox31.0
其他技術

閱讀前說明

此範例產生本來只是因為原本網路上男丁格爾的範例無法應用在IE6上，人在江湖上總是會有逼不得已的時候(尤其是在公司還有再用IE6的USER時)最後只好自己寫一個出來用了，雖然無法像男丁格爾的範例一樣漂亮，但是勝在IE6可以執行而且不需要再用JQuery多做一個DIV來做為提示區塊，這樣可以不用擔心DIV區塊跑版的問題(天啊~IE6什麼時候再可以消失)，好~讓我們回到主題，本次共有三個範例，圍繞著以下兩個主題共三個範例，接下來將會逐一介紹三個範例的差異

• 1.單一文字欄位浮水印設定
• 2.全頁文字欄位浮水印設定

Q:咦!?既然目的一樣那為什麼要分三個範例說明呢
A:因為這樣才能凸顯我的辛苦讓也想要嘗試自己寫看看的人能夠了解不同寫法的優缺點以及為什麼我會採用最後一種寫法，接下來就讓我們開始介紹今天的主題吧

1.單一文字欄位浮水印設定

首先先來介紹小弟我一開始自己想到的寫法:
首先先建立幾個input文字欄位，這邊為了讓各位施主能夠有個「Before using 」跟「After use」的比較，這邊建立了兩個文字欄位分別為"tra"(有套用文字框浮水印)跟"tra1"(沒有套用文字框浮水印)
※請注意要記得先將提示訊息寫入Input的Value屬性中

<!--使用文字框浮水印-->
<input id="tra" value="文字框浮水印" />
<!--未使用文字框浮水印-->
<input id="tra1" value="文字框浮水印" />

接下來就要進行JQuery程式撰寫的部分了，這個方式主要是以input的Value值作為判斷條件，詳細說明請參考下面範例的註解

$(function() {
  //單一一個欄位的文字框浮水印
  var tra,val
  val="請填寫匯款對象";
  //將文字設定為灰色
  $("#tra").css("color","#bfbfbf");
  $("#tra").focus(function() {
    //獲得焦點
    //清空input
    $("#tra").val("");
    //清除內嵌的CSS樣式
    $("#tra").removeAttr("style");
    //使用者輸入的文字指定給欄位
    $("#tra").val(tra);
    //讓游標停留在最後一個字元
    var e = event.srcElement;
    var r =e.createTextRange();
    r.moveStart("character",e.value.length);
    r.collapse(true);
    r.select();
  });
  $("#tra").blur(function() {
    //失去焦點
    //將使用者輸入的職指定給變數tra
    tra=$("#tra").val();
    //判斷tra是否為空，若是空的話則顯示預設樣式
    if($("#tra").val()==""){
      $("#tra").val(val);
      //將文字設定為灰色
      $("#tra").css("color","#bfbfbf");
    }
  });
});

Demo展示:

See the Pen 文字框浮水印-單一欄位設定方式[Value為判斷條件] by jen (@jen_huang) on CodePen.

2.全頁文字欄位浮水印設定

是的故事進行到這邊，一定會有眼尖的人心中出現疑問，每設定一個欄位都要寫一次這些Code，那不是寫出來為難自己的嗎?
沒錯身為一個業餘的工程師當然不會這樣找自己的麻煩，所以偉大的新Function出現了，讓我們能夠針對頁面上所有的Input和TextAreay做一次設定完成
而在這一部份將會拆為兩個小標來介紹，一個一樣是利用「Value屬性」，另外一個則是利用「Title屬性」

(1)以Value屬性為判斷條件

在這邊我們一樣先設定兩個input的標籤一樣一個套用一個不套用，方便做比較

<!--使用文字浮水印效果>
<input id="transfer" class="" value="請輸入帳號">
<!--未使用文字浮水印效果>
<input id="" class="" value="請輸入電話">

接下來是JQuery的部分在這裡採用.each()來遍歷頁面中所有Textbox及TextArea並針對有設定Value值的input進行改造

$(function() {
  // 取得要加上提示的元素並一一設定
  $(":text, textarea").each(function(i, ele){
    // 先把目前元素轉換成 jQuery 物件後記錄起來
    // 再取得 id 屬性值
    var tra,val
    var _text = $(ele),
        _value = _text.attr("value"),
        _id = _text.attr("id") || "";
    //將欄位初始的Value寫入變數
    val=$("#"+_id).val();
    //如果id有值的話就進行樣式更換
    if(!!_id){
      //設定欄位初始樣式
      $("#"+_id).css("color","#bfbfbf");    
    }
    $("#"+_id).click(function(){
      // 當提示區塊被點擊時，觸發輸入框的 focus 事件
      $("#"+_id).trigger("focus");
    });     
    $("#"+_id).focus(function(){
      // 隱藏提示區塊
      //清空input
      $("#"+_id).val("");
      //清除內嵌的CSS樣式
      $("#"+_id).removeAttr("style");
      //使用者輸入的文字指定給欄位
      $("#"+_id).val(tra);
      //這一段沒仔細研究不過主要用於讓欄位
      //獲得焦點時，游標停留在最後面      
      var e = event.srcElement;
      var r =e.createTextRange();
      r.moveStart("character",e.value.length);
      r.collapse(true);
      r.select();
    }).blur(function(){
      // 如果輸入框中沒有值則再顯示提示區塊
      tra=$("#"+_id).val();
      //判斷tra是否為空，若是空的話則顯示預設樣式
      if($("#"+_id).val()==""){
        $("#"+_id).val(val);
        $("#"+_id).css("color","#bfbfbf");
      }
    });
  });
});

Demo展示:

See the Pen 文字欄位浮水印-整個網頁[以Value為判斷條件] by jen (@jen_huang) on CodePen.

(2)以Title屬性為判斷條件

<!--使用文字框浮水印的文字欄位-->
<input id="tra" title="文字框浮水印1">
<input id="tra1" title="文字框浮水印2">
<textarea  id="ta" title="請輸入說明"></textarea>
<!--未使用文字框浮水印的文字欄位-->
<input id="tra3" title="">
<TEXTAREA id="text1"></TEXTAREA>

接下來是JQuery的部分在這裡一樣採用.each()來遍歷頁面中所有Textbox及TextArea並針對有設定Title值的input進行改造

$(function() {
  $(":text, textarea").each(function(i, ele){
    // 先把目前元素轉換成 jQuery 物件後記錄起來
    // 再取得 id 屬性值
    var tra,val
    var _text = $(ele),
        _title = _text.attr("title"),
        _id = _text.attr("id") || "";
    //如果id有值的話就進行樣式更換
    if(!!_title){
      //將欄位初始的Value寫入變數
      val=$("#"+_id).attr("title");
      //設定欄位初始樣式
      $("#"+_id).css("color","#bfbfbf");
      if($("#"+_id).val()==""){
        //如果欄位是空一開始賦予title的值
        $("#"+_id).val($("#"+_id).attr("title"));
      }else{
        $("#"+_id).removeAttr("style");
      }
    }
    $("#"+_id).focus(function(){
      //若title與欄位參數不相等時執行
      if(_title != $("#"+_id).val()){
        //將欄位值寫入tra變數中
        tra=$("#"+_id).val();
        //使用者輸入的文字指定給欄位
        $("#"+_id).val(tra);
      }else{
        //清空input
        $("#"+_id).val("");
      }
      //清除內嵌的CSS樣式
      $("#"+_id).removeAttr("style");
      /*
        這一段沒仔細研究不過主要用於讓欄位
        獲得焦點時，游標停留在最後面
      */
      var e = event.srcElement;
      var r =e.createTextRange();
      r.moveStart("character",e.title.length);
      r.collapse(true);
      r.select();
    }).blur(function(){
      //alert(tra + "-" +val);
      //判斷tra是否為空，若是空的話則顯示預設樣式
      if($("#"+_id).val()==""){
        $("#"+_id).val(val);
        $("#"+_id).css("color","#bfbfbf");
      }
    });
  });
});

Demo展示:

See the Pen 文字欄位浮水印-整個網頁設定[以Title為判斷條件] by jen (@jen_huang) on CodePen.

後記:

相信一定會有人有些疑問(哪來這麼多疑問阿)，為什麼明明用Value跟Title作為判斷條件顯示的結果都是一樣的，幹嘛還要這麼麻煩弄成用Title來做判斷呢? 是的是出必有因，會使用Title的關鍵原因就是若這個功能以Value來寫的話再搭配其它後端的程式語言時(如JSP、PHP、.NET..等)，會出現觸發狀態異常而造成顯示效果不正確的情況，雖然機率很小但是能盡量避免總是好的，而且Title本身就是提示訊息的屬性請參考(w3cschool.cc)因此比較不會影響到其它東西，所以最後多了一個以Title為判斷條件的版本

以上範例希望能夠讓各位對於JQuery在文字欄位浮水上的應用能夠有所收穫，若是有更好或是更簡短的寫法也歡迎提出來分享