Jquery Validate 与占位符 Polyfill 不兼容？ [IE9错误]

Question

我目前正在将Placeholder Polyfill by Mathias Bynens 与jquery.validate plugin (v1.11.1) 结合使用，并且在使用 Internet Explorer 9 时遇到了令人沮丧的错误。

如果我的type="password" 字段定义了非空的placeholder 属性，我无法获得必填字段 验证。一旦输入了一个值并且占位符文本消失了，剩下的验证就可以正常工作了。

Live Demo of this code can be found here

JS

$('input').placeholder(); // init placeholder plugin
signupFormValidator = $('form').validate(); // init validation

HTML

<form>
  <input class="required" type="text" name="test" id="test" placeholder="test"><br>
  <input class="required" type="password" name="password" id="password" placeholder="password"><br>
  <input class="required" type="password" name="confirm"  id="confirm"  placeholder="confirm"><br>
  <input type="submit">
</form>

Answer 1

编辑：此修复在 Firefox 中引入了错误。请参阅下面的评论。

---

为了解决这个问题，我最终使用了一些我自己烘焙的相当 hacky 的 jQuery：

$('#password, #confirm').keyup(function() {
    var $input = $(this);
    if ($input.attr('type') === 'text') {
        if ($input.val().length > 0) {
            $input.attr('type', 'password');
        }
    } else if ($input.val() === "") {
        $input.attr('type', 'text');
    }
});

这样做的目的是将字段type 设置为“文本”而不​​是“密码”，从而有效地解决了那个讨厌的占位符问题。

小问题：当开始在输入中输入文本时，密码的第一个字符会短暂显示为纯文本。