在IE8中输入类型密码的jQuery输入占位符

Question

我使用的是jQuery而不是HTML5占位符属性

<input type="text" name="email" value="Email" onfocus="if (this.value == 'Email') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Email'; }" onclick="if (this.value == 'Email') { this.value = ''; }"  />

这个工作正常,type="text"但type="password"它只显示*

我将如何使用占位符密码字段？需要在IE8中

预谢谢答案......

Answer 1

我创建一个普通输入,然后focus将其切换到密码字段,如果该值为空blur,则将其切换回正常输入,否则将其保留为密码字段.

这是一个有效的JSFiddle: http ://jsfiddle.net/q8ajJ/

HTML

<!-- Style = display none for people who dont have javascript -->
<input type="text" name="fake_pass" id="fake_pass" value="Enter Password:" style="display:none"/>
<input type="password" name="real_pass" id="real_pass"/>?

Javascript(jQuery)

// On DOM ready, hide the real password
$('#real_pass').hide();

// Show the fake pass (because JS is enabled)
$('#fake_pass').show();

// On focus of the fake password field
$('#fake_pass').focus(function(){
    $(this).hide(); //  hide the fake password input text
    $('#real_pass').show().focus(); // and show the real password input password
});

// On blur of the real pass
$('#real_pass').blur(function(){
    if($(this).val() == ""){ // if the value is empty, 
        $(this).hide(); // hide the real password field
        $('#fake_pass').show(); // show the fake password
    }
    // otherwise, a password has been entered,
    // so do nothing (leave the real password showing)
});

​

Answer 2

这是另一个肮脏的黑客 - 你可以label用position: absolute焦点和模糊创建和显示/隐藏它.

据我所知,它适用于任何浏览器.而且,验证表单提交更简单.

HTML

<div class="wrapper">
    <input class="withPlaceholder" type="password" id="pass" />
    <label class="placeholder" for="pass">Password</label>
</div>
<br />
<div class="wrapper">
    <input class="withPlaceholder" type="password" id="pass2" />
    <label class="placeholder" for="pass2">Password2</label>
</div>

CSS

div.wrapper {position: relative}
label.placeholder {position: absolute; color: #CCC; left: 2px; top: 0} 

JS

$("input.withPlaceholder").on({
    focus: function() {
        $("label[for=" + $(this).prop("id") + "]").hide();
    },
    blur: function() {
        if ($(this).val().length == 0) {
            $("label[for=" + $(this).prop("id") + "]").show();
        }
    }
});