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

标签 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

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

谢谢。

最佳答案

我想这就是你想要的:

<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);

用法:

$('input').emulatePlaceholder();

jsFiddle例子

关于javascript - 在用户名和密码字段中显示说明,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16252048/

相关文章:

javascript - 迭代 DOM 和 JSON 响应的最佳实践

javascript - 如何将 $.ajax 对象传递给另一个函数?

javascript - 在没有 openFile 对话框的情况下将文件从客户端上传到服务器

javascript - jQuery Unobtrusive 在 IE7 或 IE8 中不起作用

asp.net-mvc-3 - ASP.NET MVC 3 区域中的路由问题

javascript - 导航栏中的下拉菜单不会展开( Bootstrap 、 Angular 、指令、路线)

javascript - jQuery 不是一个数字

javascript - 无法打开所选对象的指向 url

javascript - JS : Escaping a string with backslash at the end of a string, 用于与 jQuery 函数一起使用

javascript - 滚动时将每个 div 视为 "page"