JAvascriptテキストボックス透かし/プレースホルダ(watermark/placeholder)

html 5はフォーム要素(typeはtext/password/search/url/telephone/email)にplaceholderプロパティを追加し、入力ボックスにヒントを提供します.Firefox/Chrome/Operaは、あるバージョンからこの機能をサポートしていますが、ieシリーズはie 9でもサポートされていないため、placeholderの特性をサポートしていないブラウザとjavascriptで互換性を持つ必要があります.
普遍的なやり方
現在一般的に使用されている方法は、フォーム要素のonfocus/onblurイベントによってvalue値を変更することです.以下のようにします.

<input type="text" id="text1" />
<script>
var el = document.getElementById("text1");
if (el.value == "")
  el.value = "    ";
  
el.onfocus = function() {
  if (this.value == "    ")
    this.value = "";
};
el.onblur = function() {
  if (this.value == "")
    this.value = "    ";
}
</script>

jQueryの各watermarkプラグイン(http://archive.plugins.jquery.com/plugin-tags/watermark)の多くはこのようなやり方を採用しており、いくつかのスタイルを設定するなどの操作もあるかもしれません.
この方法はフォーム要素を直接操作して、便利で速くて、比較的に実用的です.
しかし、弊害もあります.

一部の操作では、autocomplete、検証などの

など、フォーム要素のvalue値をリスニングすることによって機能を実現する必要がある.

フォームの発行時に値

を空にする必要があります.
もちろん他にも弊害があるかもしれませんが、ここでは挙げません.
より良い方法
不要なトラブルを避けるためには、フォーム要素のvalue値を変更することを避けます.
まず、次のテキストボックスがあります.

<input type="text" />

テキストボックスの値を変更できない場合は、spanまたは他の要素を追加し、テキストボックスの上に絶対的に配置し、外枠にposition:relativeのコンテナを追加して包装することで、ヒント情報がずれないことを保証します.たとえば、次のようにします.

<span style="position:relative;">
  <span style="position:absolute;">    </span>
  <input type="text" />
</span>

何気なくタオバオの登録ページにposition:relativeの容器を追加して包装してもオフセットが発生しないことに気づいたので、ヒント情報のマークをテキストボックスの前に置くだけでいいです.以下のようにします.

<span style="position:absolute;">    </span>
<input type="text" />

このようにして生成されたマークはより簡潔である.
対応するスタイル
最終的に表示されるタグが決定された以上、次のように適切なスタイルを定義する必要があります.

/*         style */
.w-label {
  position: absolute;
  padding: 0 0 0 6px;
  margin: 0;
  font-size: .8em;
  color: #999;
  opacity: 1;
}
/*      */
.w-hide {
  visibility: hidden;
  opacity: 0;
}
/*          ，      */
.w-active {
  color: #ddd;
}

htmlは次のようになります.

<span class="w-label">    </span>
<input type="text" />

関連スクリプト
フォーム要素のvalue値を変更して効果を達成する必要はありませんが、onfocus/onblurイベントによってプロンプト情報のタグを制御する必要があります.すべては次のように実現されます.

/*      */
var addEvent = document.addEventListener ?
  function(element, type, fn) {
    element.addEventListener(type, fn, false);
  } :

  function(element, type, fn) {
    element.attachEvent("on" + type, fn);
  },
 
/*        */
removeEvent = document.removeEventListener ?
  function(element, type, fn) {
    element.removeEventListener(type, fn, false);
  } :

  function(element, type, fn) {
    element.detachEvent("on" + type, fn);
  },

/*      /    */
watermark = function(element, text) {
  if (!(this instanceof watermark))
    return new watermark(element, text);

  var place = document.createElement("span");//      
  element.parentNode.insertBefore(place, element);//            
  place.className = "w-label";
  place.innerHTML = text;
  place.style.height = place.style.lineHeight = element.offsetHeight + "px";//    、     
  
  function hideIfHasValue() {
    if (element.value && place.className.indexOf("w-hide") == -1)
      place.className += " w-hide";
  }
  
  function onFocus() {
    hideIfHasValue()
    if (!element.value && place.className.indexOf("w-active") == -1)
      place.className += " w-active";
  }
  
  function onBlur() {
    if (!element.value) {
      place.className = place.className.replace(" w-active", "").replace(" w-hide", "");
    }
  }
  
  function onClick() {
    hideIfHasValue();
    try {
      element.focus && element.focus();
    } catch (ex) {}
  }
  
  //       
  hideIfHasValue();
  addEvent(element, "focus", onFocus);
  addEvent(element, "blur", onBlur);
  addEvent(element, "keyup", hideIfHasValue);
  addEvent(place, "click", onClick);
  
  //   watermark
  this.unload = function() {
    removeEvent(element, "focus", onFocus);
    removeEvent(element, "blur", onBlur);
    removeEvent(element, "keyup", hideIfHasValue);
    removeEvent(place, "click", onClick);
    element.parentNode.removeChild(place);
  };
};

以上のコードは、フォーム要素のfocus/blur/keyupイベントによって、プロンプト情報タグの表示、非表示、スタイルを制御します.また、情報タグのclickイベントをプロンプトすることで、それを非表示にし、フォーム要素に焦点を当てます.
最後にunloadメソッドを提供してwatermarkをキャンセルします.
具体的な使用
以上のjsおよびcssがあれば、watermark機能を実現するために直接使用することができます.以下のプレゼンテーションアプリケーションおよびwatermarkのキャンセルを行います.

<input id="text1" type="text" />
<input type="button" id="button1" value="  watermark" />
<script>
  var m1 = watermark(document.getElementById("text1"), "    ");
  addEvent(document.getElementById("button1"), "click", function() {
    m1.unload();
  });
</script>

html 5 placeholder互換性
以上の実装がある以上、html 5 placeholderをサポートしていないブラウザとの互換性も簡単です.まず、ブラウザがplaceholderをサポートしているかどうかを判断する必要があります.

var html5support = "placeholder" in document.createElement("input");

次にhtml 5 placeholderをサポートしないブラウザに対して、フォーム要素のplaceholder内容を抽出し、以下のように実現する.

placeHolderForm = function(form) {
  var ph, elems = form.elements,
    html5support = "placeholder" in document.createElement("input");
    
  if (!html5support) {
    for (var i = 0, l = elems.length; i < l; i++) {
      ph = elems[i].getAttribute("placeholder");
      if (ph) watermark(elems[i], ph);
    }
  }
}

デモコードは次のとおりです.

  <form id="form2">
  <fieldset>
    <legend><strong>    html5 placeholder       watermark</strong></legend>
    <ul>
      <li>
           ：
        <input type="text" placeholder="      " />
      </li>
      <li>
           ：
        <input type="password" placeholder="      " />
      </li>
      <li>
            ：
        <textarea placeholder="        "></textarea>
      </li>
    </ul>
  </fieldset>
  </form>
  <script>
    placeHolderForm(document.getElementById("form2"));
  </script>

の最後の部分
これで、機能はすべて完了し、すべてのコード:ダウンロードを置いて、追加の必要があれば自分で修正することができます.