Firefox/Chrome/Opera從某一版本開始已經支援這一特性，但ie系列即使是ie9也還不支援，所以需要通過javascript來相容這些不支援placeholder特性的瀏覽器。
普遍的做法
現在普遍使用的做法是通過表單元素的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)大都是採用這種做法，可能還會有設定一些樣式等操作。
這種做法直接動作表單元素，方便快捷，比較實用。
但它也有弊端：
有些操作同樣需要通過監聽表單元素的value值來實現功能，比如：autocomplete、驗證等
表單提交時需要清空它的值
當然可能還有其他弊端，這裡不再列舉。
更好的做法
為了避免引起不必要的麻煩，就要避免去改變表單元素的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";//設定高度、行高以置中
element.place = this;
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", "");
place.className = place.className.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);
element.place = null;
};
};
以上代碼分別通過表單元素的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>
html5 placeholder相容
既然有了以上的實現，那麼相容不支援html5 placeholder的瀏覽器也很簡單，首先，需要判斷瀏覽器是否支援placeholder：
複製代碼 代碼如下:
var html5support = "placeholder" in document.createElement("input");
接著，對不支援html5 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) elems[i].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>
結尾
至此，功能全部完成，放上全部代碼：點擊下載，如有額外需要可自行修改。
作者：囧月
出處：http://lwme.cnblogs.com/
