Question

我有一个包含电子邮件文本框和密码文本框的登录页面。两个文本框分别具有以下默认文本 - “电子邮件地址”和“密码”。当用户在任一字段中输入值时，将清除默认文本。我有这个工作，除非用户设置他们的浏览器以记住他们的密码。

当密码自动填充时，默认文本不会清除，因此它看起来像2个文本。

相关HTML：

<div class="input-wrapper">
<label for="txtSID">Email address</label>
<input type="text" id="txtSID" name="txtSID" class="text" />
</div>                              

<div class="input-wrapper">
<label for="txtPassword">Password</label>
<input type="password" id="txtPassword"  name="txtPassword" class="text" />
</div>

相关CSS：

input.text {    
    position: relative;
    display: -moz-inline-box; /* ff2 */
    display: inline-block;
    *display: inline; /* ie6&7 */
    zoom: 1;
}

.input-wrapper {
    position: relative;
    display: -moz-inline-box;
    display: inline-block;
    *display: inline; /* ie6&7 */
    zoom: 1;
}

.input-wrapper input.text {
    z-index: 2;
    margin: 0;
    border: 0;
    background: transparent;
    *background: url(http://hunch.com/media/img/t.png); /* ie7 does weird stuff with transparent background, also please don't deep link to this image from your code */
}

.input-wrapper label {   
    z-index: 1;
    position: absolute;  
    overflow: hidden;
}

.input-wrapper.focus label {
    filter:alpha(opacity=50);
    opacity: 0.6;
}

.input-wrapper.filled label {
    display: none;
}

相关Jquery：

$(document).ready(function() {

    var parentSelector = '.input-wrapper',
    inputSelectors = [parentSelector + '>input.text', parentSelector + '>textarea'],
    len = inputSelectors.length,
    i;

    function update(force) {
        var $input = $(this),
        $parent = $input.parent(parentSelector);
        return $parent[force === true || $input.val() ? 'addClass' : 'removeClass']('filled');
    }

    function focus() {
        update.call(this).addClass('focus');
    }

    function blur() {
        update.call(this).removeClass('focus');
    }

    function keydown(evt) {
        var c = evt.keyCode;
        ((47 < c && c < 91) || (95 < c && c < 112) || (185 < c && c < 223)) && update.call(this, true);
    }

    $.fn.prepareInput = function() {
        return this.each(update);
    };

    for (i = 0; i < len; i++) {
        $(inputSelectors[i]).live('focus', focus).live('blur', blur).live('keyup', update).live('click', update).live('keydown', keydown);
    }

    $(function() {
        for (i = 0; i < len; i++) {
            $(inputSelectors[i]).prepareInput();
        }
    });
});

Answer 1

出现问题是因为您依靠KeyDown事件来清除默认值（实际上称为占位符）。

其他选项：

尝试使用HTML5占位符属性：

<input type="text" placeholder="Email address" id="txtSID" name="txtSID" class="text"/>
<input type="password" placeholder="Password" id="txtPassword"  name="txtPassword" class="text" />

虽然浏览器支持还不是100％，但这将为您提供实现目标的标准方法。

注意：自动填充似乎会触发onchange事件，因此您可以尝试使用它而不是onkeydown。

如果没有HTML5，请查看jquery-watermark更简单，更清洁的Placholder。

要关闭自动填充功能，您可以参考here。

记住密码时，Jquery Textbox的默认值不会清除

1 个答案:

其他选项：