让所有浏览器都支持HTML5 placeholder属性

HTML5的placeholder属性

placeholder 属性是 HTML5 中的新属性，俗名叫“占位符”，功能类似于输入框在得到焦点时，时面的默认值会变成空白，当失去焦点时又会显示默认的文本，我想大家一定使用js/jquery制作过这样的效果。目前只有在Mozilla Firefox 3.7+、Apple Safari 4+、Google Chrome 4+、Opera11+等现代浏览器支持。

检测浏览器是否支持placeholder属性

$.support.placeholder = false;
if ("placeholder" in document.createElement("input")) $.support.placeholder = true;

该特性仅被现代浏览器支持，在旧版 IE 下我们可以使用 javascript 来模拟实现。

Placeholder 的 js 实现

var doc = document,
inputs = doc.getElementsByTagName('input'),

// 检测 placeholder 支持
supportPlaceholder = 'placeholder' in doc.createElement('input'),

/*
* 创建 placeholder
* @param {ELEMENT} input 传入的 input 对象
* @return {VOID}
* @author: sofish Lin http://sofish.de */
placeholder = function (input) {
var text = input.getAttribute('placeholder'),
defaultValue = input.defaultValue;

// 制作一个假 placeholder
// 需要 css 配合，在 JS 中设置 style 并不太好
input.value = text;

// 聚焦去掉假 placeholder
input.onfocus = function () {
if (input.value === defaultValue || input.value === text) {
this.value = '';
}
}

// 当失焦值为空时，补回 placeholder 的值
input.onblur = function () {
if (input.value === '') {
this.value = text;
}
}
};

if (!supportPlaceholder) {
for (var i = 0, len = inputs.length; i < len; i++) {
var input = inputs[i],
text = input.getAttribute('placeholder');

// 当 input[type=text] 并且 placeholder 值不为空是执行
if (input.type === 'text' && text) {
placeholder(input);
}
}
}

Placeholder 的 jQuery 插件

为了让代码可以重用，而不必为页面中每个 <input> 都写上相应的处理逻辑，有人专门写了一个 jQuery 下的插件。于是我们只需在页面引用一段 js ，就可以像 HTML5 的标准写法一样，在 input 中添加属性 placeholder 来实现这个效果了，简洁高效。同时，在 HTML5 时代真正来临时（也就是所有主流浏览器都开始支持 HTML5 的时候），直接移除这个插件的 js 引用即可，无需做任何重构。

插件主页：

http://webcloud.se/code/jQuery-Placeholder/