密码字段中的Jquery默认值

时间:2011-05-09 18:39:44

标签: javascript jquery html forms input

我使用this Jquery plugin填充输入文本,点击后消失。它对于密码字段并不理想,因为所有内容都显示为点。在开始输入之前,在密码字段中显示默认文本的好方法是什么?

3 个答案:

答案 0 :(得分:7)

通过JS,我的答案与@ ultimatebuster的答案相同。然而,整个JS路线都是hacky,现在替代品开始出现了。许多现代浏览器现在直接通过HTML5支持这个东西:

<input type="password" name="password" placeholder="Enter password"/>

(许多现代浏览器=除了Internet Explorer之外的每个主要浏览器。我拒绝为它编码;如果你在IE中也必须有相同的东西,你将不得不走黑客路线。)

答案 1 :(得分:1)

您可以将输入字段的类型设置为密码。但是,在页面加载时通过javascript将其设置为正常(这样,如果用户没有JS,您可以轻松回退)。收到点击后,将输入字段的类型设置回密码。

答案 2 :(得分:1)

与建议一样,您可以交换输入,但它在IE中不起作用。 IE不会允许它,因为它可能是某种安全漏洞。

我以前用过这个:

/* From: http://grzegorz.frydrychowicz.net/jquery_toggleformtext/
   Modified to swap password textbox type so watermark can be read */
$(document).ready(function() {
    if (!jQuery.browser.msie) {
        $("input:password").each(function() {
            if (this.value == '') {
                this.type = "text";
            }
            $(this).focus(function() {
                this.type = "password";
            });
            $(this).blur(function() {
                if (this.value == '') {
                    this.type = "text";
                }
            });
        });
    }
    $("input:text, textarea, input:password").each(function() {
        if (this.value == '') {
            $(this).addClass("watermark");
            this.value = this.title;
        }
    });
    $("input:text, textarea, input:password").focus(function() {
        $(this).removeClass("watermark");
        if (this.value == this.title) {
            this.value = '';
        }
    });
    $("input:text, textarea, input:password").blur(function() {
        if (this.value == '') {
            $(this).addClass("watermark");
            this.value = this.title;
        }
    });
    $("input:image, input:button, input:submit").click(function() {
        $(this.form.elements).each(function() {
            if (this.type == 'text' || this.type == 'textarea' || this.type == 'password') {
                if (this.value == this.title && this.title != '') {
                    this.value = '';
                }
            }
        });
    });
});

我终于放弃了一个正常的密码输入行为。我发现上面的输入交换有点古怪,但你可以试一试。