web前端|js教程
文本框水印,占位符
web前端-js教程
Firefox/Chrome/Opera从某一版本开始已经支持这一特性，但ie系列即使是ie9也还不支持，所以需要通过javascript来兼容这些不支持placeholder特性的浏览器。
.net 图书管理系统源码,ubuntu网络安装iso,有关tomcat的基础知识,爬虫检索关键数据,php创建类和对象代码,河南seo做法lzw
普遍的做法
现在普遍使用的做法是通过表单元素的onfocus/onblur事件来改变value值，如下：
新闻软文平台源码,vscode调整颜色风格,ubuntu 复制黏贴,tomcat怎么自动刷新,sqlite只能显示三条数据,学校爬虫,php 大小写敏感,万词霸屏seo公司,付费的共享网站,物流手机网站模板lzw
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 = "提示信息";
}
jQuery的各个watermark插件(http://archive./plugin-tags/watermark)大都是采用这种做法，可能还会有设置一些样式等操作。
最新售卡源码,上网本 安装ubuntu,爬虫项目的前沿,php sum统计,武汉seo号码lzw
这种做法直接操作表单元素，方便快捷，比较实用。
但它也有弊端：
有些操作同样需要通过监听表单元素的value值来实现功能，比如：autocomplete、验证等
表单提交时需要清空它的值
当然可能还有其他弊端，这里不再列举。
更好的做法
为了避免引起不必要的麻烦，就要避免去改变表单元素的value值。
首先，假如有如下一个文本框：
既然不能改变文本框的值，那么只能通过添加一个span或其他元素，并通过绝对定位放置到文本框之上，并在外框加一个position:relative的容器来包装它们以保证提示信息不会产生偏移，如：
提示信息
无意中发现淘宝的登录页面并不需要额外加一层position:relative的容器来包装也不会产生偏移，所以仅需要把提示信息的标记放在文本框之前即可，如下：
提示信息
这样子产生的标记更加简洁。
相应的样式
既然最终呈现的标记已经确定，那么现在就需要定义相应的样式，来使它看起来更美观，如下：
/* 标记的主要样式 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就相应的变成：
提示信息
相关的脚本
虽然不需要去改变表单元素的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：
var m1 = watermark(document.getElementById("text1"), "提示信息");
addEvent(document.getElementById("button1"), "click", function() {
m1.unload();
});
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);
}
}
}
演示代码如下：
placeHolderForm(document.getElementById("form2"));
结尾
至此，功能全部完成，放上全部代码：点击下载，如有额外需要可自行修改。
作者：囧月
出处：/
如果觉得《javascript 文本框水印/占位符(watermark/placeholder)实现方法【javascript】》对你有帮助，请点赞、收藏，并留下你的观点哦！
