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)大都是采用这种做法，可能还会有设置一些样式等操作。
这种做法直接操作表单元素，方便快捷，比较实用。
但它也有弊端：
有些操作同样需要通过监听表单元素的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> |
|
相应的样式
既然最终呈现的标记已经确定，那么现在就需要定义相应的样式，来使它看起来更美观，如下：
| 代码如下 | |
|
/* 标记的主要样式 style */ <span class="w-label">提示信息</span> |
|
虽然不需要去改变表单元素的value值来实现效果，但还是需要通过onfocus/onblur事件来控制提示信息的标记，全部实现如下：
| 代码如下 | |
|
/* 事件绑定 */ function(element, type, fn) { function(element, type, fn) { /* 文本框水印/占位符 */ var place = document.createElement("span");//提示信息标记 |
|
以上代码分别通过表单元素的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> |
|
