在用户名和密码字段中显示说明

时间：2013-04-27 12:21:15

标签： javascript jquery asp.net-mvc-3

我正在尝试创建与https://login.microsoftonline.com/中类似的登录信息。我想在字段中显示描述“someone@example.com”和“密码”。

我尝试使用txReplaceFormPassword.js（http://snipplr.com/view/29555/）脚本动态替换字段，但它返回html文本而不是实际字段。

<head>
<script src="@Url.Content("~/Scripts/txReplaceFormPassword.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.pwdfield').txReplaceFormPassword({
    show_text: 'Password'
});
});
</script>
</head>

<div class="pwdfield">
@Html.PasswordFor(model => model.Password, new {@class = "k-textbox", style = "width:300px"})
@Html.ValidationMessageFor(model => model.Password)
</div>

我在浏览器中收到以下输出：

PasswordField

请告诉我如何在密码/用户名字段中获取与上述两个链接类似的说明。

感谢。

1 个答案:

答案 0 :(得分：2)

我认为这就是你想要的：

<input type="text" placeholder="someone@example.com" /><br />
<input type="password" placeholder="Password" />

据我所知，你不需要使用js或jQuery。只需将placeholder=""设置为您要在字段中显示的文字。

查看this link。

修改

然后使用以下jQuery（在ie 7上测试）：

(function($){
var placeholderIsSupported = ('placeholder' in document.createElement('input'));
$.fn.emulatePlaceholder = function(){
    if(!placeholderIsSupported){
        this.each(function(index, element){
            var handle = $(element);
            var placeholder = handle.attr('placeholder');           
            if(handle.val() == ''){
                handle.val(placeholder);    
            }
            handle.blur(function(e){
                var handle = $(this);
                if(handle.val() == ''){
                    handle.val(placeholder);
                }
            });
            handle.focus(function(e){
                var handle = $(this);
                if(handle.val() == placeholder){
                    handle.val('');
                }
            });
        });
    }
};
})(jQuery);

<强> USAGE： 

$('input').emulatePlaceholder();

jsFiddle示例

相关问题
最新问题