HTML5 placeholder模拟相关jQuery插件实例页面

代码：

HTML代码：

<p>
    <label for="test1">测试1：</label>
    <input type="text" id="test1" placeholder="这是value模拟" size="26" />
</p>
<p>
    <label for="test2">测试2：</label>
    <input type="text" id="test2" placeholder="这是label普通模拟" size="26" />
</p>
<p>
    测试3：
    <input type="text" class="test3" placeholder="这是label透明度交互模拟" size="26" />
</p>
<p>
    <label for="test4">测试4：</label>
    <input type="text" id="test4" placeholder="这是跨浏览器透明度交互模拟" size="26" />
</p>
<p>
    <label for="test5">测试5：</label>
    <input id="test5" type="text" placeholder="label元素藏于文本框之下" size="26" />
</p>

JS代码：

$(function() {
    $("#test1").placeholder();
    $("#test2").placeholder({
        labelMode: true    
    });
    $("#test3").placeholder({
        labelMode: true,
        labelAlpha: true    
    });
    $("#test4").placeholder({
        labelMode: true,
        labelAlpha: true,
        labelAcross: true
    });	
    $("#test5").placeholder({
        labelMode: true,
        labelStyle: {
            margin: "5px 0 0 6px",
            fontSize: "14px"
        },
        labelAlpha: true,
        labelAcross: true
    });	
});

效果：

测试1：

测试2：

测试3：

测试4：

补充于翌日：

测试5：

#test5 { /* 测试5 文本框样式 */
    height: 28px;
    line-height: 28px;
    padding-left: 5px;
    border: 1px solid #a0b3d6;
    background: none;
    position: relative;
}