Question

我有一个简单的登录表单，我想在字段中显示标题，只要它们是空的。问题是，JS无法更改密码类型。

所以当密码字段为空时，我接受了第二个输入，该输入与密码字段交换。

问题是，如果用户输入用户名并且浏览器自动填写密码字段，则不会显示密码字段... 我该怎么办？

我的HTML，

<form name="login" method="post" action="/login" class="dialog form">
    <input type="submit" value="GO" />
    <div class="field">
        <input type="text" name="username" class="required" title="Username"/>
    </div>
    <div class="field">
        <input type="password" name="password" class="required"  />
        <input type="text" value="Password" class="password-title" />
    </div>
    <p class="clear">&nbsp;</p>
</form>

我的JS（需要jQuery）：

       $("input[type=text]").each(function(){
           var input = $(this);

           if(input.val() == "") input.val(input.attr('title'));
           input.bind('click', function(){
               $(this).focus();
               if($(this).val() == $(this).attr('title')) $(this).val("");
           });
           input.bind('blur', function(){               
                if($(this).val() == "") $(this).val($(this).attr('title'));
           });

        });

        $("input[type=password]").each(function(){
            var input = $(this);
            var title = input.next('.password-title');

            if(input.val() == "" && title.length > 0){
                title.show();
                input.hide();
            }

            title.bind('click', function(){
                title.hide();
                input.show();
                input.focus();
            });

            input.bind('blur', function(){
                if($(this).val() == ""){
                    title.show();
                    input.hide();
                }
            });

            input.bind('DOMAutoComplete', function(){
                alert("dafuq"); //does not work (tested in Chromeium)
            });

感谢您的帮助！

Answer 1

我建议使用input元素的占位符属性。阅读更多相关信息：here。

Answer 2

input.bind('change', function(){
  title.hide();
  input.show();
  input.focus();
});

触发事件，当自动完成完成密码输入时

2 个答案: