<input type="text" />
<input type="button" 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>
<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>
结尾
至此，功能全部完成，放上全部代码：点击下载，如有额外需要可自行修改。
作者：囧月
出处：
您可能感兴趣的文章: