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

Question

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

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

可以在此处找到此代码的实时演示

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

edit: this fix introduces bugs in Firefox. Please see comment below.

---

To deal with this, I ended up using some fairly hacky jQuery I baked myself:

$('#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');
    }
});

What this is doing, is setting the field type to "text" rather than "password", effectively clearing up that pesky placeholder issue.

Minor issue: the first character of the password displays as plain-text briefly when starting to enter text into the input.