javascript 文本框水印/占位符(watermark/placeholder)實現方法
2024-05-06 14:22:38
供稿：網友
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事件來控制提示信息的標記，全部實現如下：
