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事件来控制提示信息的标记，全部实现如下：
