Question

我使用我的ms-input-placeholder文件为RDWeb门户设置login.aspx样式。我想对每个用户名和密码textInputField实施persistent placeholders。我怎么能这样做？

以下是我添加的一些工作/示例代码，用于设置我的用户名和密码字段。我不能以实现持久占位符的方式修改它（占位符总是显示，即使在焦点上，除非文本框有文本）。

<style>
    .textInputField:-ms-input-placeholder {   
        color: #999999;
    }
    .textInputField:focus {
        background-color:yellow;
    }
</style>

Answer 1

试试我的Jquery插件。您发布的那个在IE中无法正常工作。

它会占用文本和密码输入中的占位符，并将它们转换为标签，以像占位符一样使其持久化。

这有带选项的动画。可用选项包括focusOpacity，focusSpeed和＆amp; fadeSpeed。

只需从下面的Fiddle链接中复制并粘贴插件代码。

Fiddle

HTML

<input id="username" type="text" placeholder="Username">
<input id="password" type="password" placeholder="Password">

CSS

.input-wrapper input {
z-index: 9999;
font-size: 14px;
height: 20px;
border: none;
background: transparent;
position: relative;
display: inline-block;
outline: none;
}

.input-wrapper {
margin: 10px;
width: 200px;
border: 1px solid #000;
vertical-align: middle;
position: relative;
display: block;
}

.input-wrapper label {
z-index: 999;
color: gray;
font-size: 14px;
font-family: arial;
font-style: italic;
height: 20px;
line-height: 20px;
padding-left: 3px;
position: absolute; 
cursor: text;
}

带选项的脚本

$(document).labelPlaceholder({focusOpacity:.5,focusSpeed:150,fadeSpeed:50});

脚本使用默认值

$(document).labelPlaceholder();

IE中的持久占位符

1 个答案: