sPlaceholder | An HTML5 placeholder attribute analog

sPlaceholder 是一个模拟 HTML5 中的 placeholder 属性的 JS 库，通过它可以解决某些浏览器不支持占位符的问题，同时也可以实现更加灵活的占位符特性。

快速开始

首先，在你的页面中引入 sPlaceholder 的脚本文件，并添加一个含有占位符的文本框：

<!doctype html>
<html lang="zh_CN">
    <head>
        <title>sPlaceholder Demo</title>
        <script class="http://biossun.org/sPlaceholder/resource/splaceholder/splaceholder.js"></script>
    </head>
    <body>
        <input type="text" placeholder="placeholder" />
    </body>
</html>

接着，当在浏览器中加载这个页面时，sPlacehoder 便会在不支持占位符的浏览器中自动为文本框添加一个『模拟占位符』，而在这个过程中，会清除文本框的 placeholder 属性，并在其周围添加两个新的元素 —— .placeholder-box 和 .placeholder-text：

<div class="placeholder-box">
    <label class="placeholder-text">placeholder text</label>
    <input type="text" />
</div>

如上所示，我们使用了两个元素来模拟实现占位符的效果，但光添加元素是不够的，还得为这些元素设置样式（比如将文字覆盖在文本框上并设置一个较淡的文字颜色等）；但遗憾的是， sPlaceholer 并没有提供任何样式，因为我们希望完全由你来为自己的文本框设置占位符样式，不过为了尽快让你完成这项工作，我们还是在下面给出了一份较为通用的样式，你可以通过修改（或扩展）它来得到自己所需要的：

.placeholder-box {
    position: relative;
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

.placeholder-text {
    position: absolute;
    left: 2px;
    top: 0;
    z-index: 0;

    color: #aaa;
    cursor: text;
}

/* 当文本框得到焦点时的占位符样式 */
.placeholder-text-focus {
    color: #ddd;
}

OK，现在你已经学会了 sPlaceholer 的基本使用方法，如果你还想实现一些更棒的功能，那么请继续看下去吧。

详细说明：

下面是一个普通的文本框，我们将以该结构为基础，为你详细讲解 sPlaceholer 的使用方式：

hide code

<input type="text" />

首先，如果只是需要在不支持占位符的浏览器中应用模拟效果，则直接给文本框添加 placeholder 属性既可：

hide code

<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" value="Bios Sun" />

而如果需要在所有浏览器中都应用模拟占位符以便得到一致的视觉及交互，那么可以给该文本框添加一个 splaceholder 属性：

hide code

<input type="text" placeholder="placeholder text" splaceholder />
<input type="text" placeholder="placeholder text" splaceholder value="Bios Sun" />

此外，如果需要更灵活的控制能力，比如使用一张图片作为占位符或为某些占位符应用一些特殊样式，则可以直接书写 placeholder 的模拟结构：

placeholder text

hide code

<div class="placeholder-box">
    <label class="placeholder-text">placeholder text</label>
    <input type="text" />
</div>
<div class="placeholder-box">
    <label class="placeholder-text">placeholder text</label>
    <input type="text" value="Bios Sun" />
</div>

在上面的结构中，如果文本框和 placeholder 元素在同一级中，则可以不添加 placeholder-box 元素：

placeholder text

hide code

<div style="position: relative; margin-bottom: 7px;">
    <label class="placeholder-text">placeholder text</label>
    <input type="text" />
</div>
<div style="position: relative;">
    <label class="placeholder-text">placeholder text</label>
    <input type="text" value="Bios Sun" />
</div>

初始化

在文档加载完毕后，sPlaceholder 会自动初始化当前文档内的所有文本框。

但对于文档加载后动态插入的内容，则无法自动对其初始化，此时便需要调用 sPlaceholder.init() 方法以进行初始化操作。

配置

配置项	类型	默认值	说明
sPlaceholer.globalInit	Boolean	true	是否在页面加载后进行全局初始化
sPlaceholer.boxClass	String	'placeholder-box'	文本框包裹元素的全局类名
sPlaceholer.textClass	String	'placeholder-text'	文本框占位符元素的全局类名
sPlaceholer.textFocusClass	String	'placeholder-text-focus'	当文本框获取到焦点时为占位符元素添加的状态类名

* 请在 DOMContentLoaded 事件触发前完成配置修改操作

已知问题

如果占位符元素覆盖在文本框之上，这样在占位符上点击右键时，显示的不是文本框的操作菜单而是普通菜单。
若是通过 JS 改变文本框的值，占位符不会自动更新。(*)
我们没有判断 input 的类型，所以该模拟特效可能会运行在 checkbox 等不支持 placeholder 的元素上。