javascript 文本框水印/占位符(watermark/placeholder)实现方法


Posted in Javascript onJanuary 15, 2012

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/
Javascript 相关文章推荐
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
May 14 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
Jan 13 #Javascript
20个最新的jQuery插件
Jan 13 #Javascript
JSON 数据格式介绍
Jan 13 #Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 #Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 #Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 #Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 #Javascript
You might like
php的一个简单加密解密代码
2014/01/14 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
javascript iframe编程相关代码
2009/12/28 Javascript
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
怎么清空javascript数组
2013/05/11 Javascript
jquery map方法使用示例
2014/04/23 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
2017/04/27 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
Python2中的raw_input() 与 input()
2015/06/12 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
python判断输入日期为第几天的实例
2018/11/13 Python
python实现三次样条插值
2018/12/17 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
儿科护理实习自我鉴定
2013/09/19 职场文书
参观监狱心得体会
2014/01/02 职场文书
派出所所长先进事迹
2014/05/19 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
教师师德承诺书2016
2016/03/25 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python