Jquery 密码字段的默认值

发布于 2024-11-06 17:19:47 字数 163 浏览 1 评论 0原文

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

I am using this Jquery plugin for populating inputs with text that disappears on click. It isn't ideal for password fields because everything shows up as dots. What would be a good way to make a default text visible in password fields before you start typing?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

一梦浮鱼 2024-11-13 17:19:47

通过 JS,我的答案将与@ultimatebuster 的相同。然而,既然替代方案开始出现,整个 JS 路线就很糟糕了。现在许多现代浏览器都直接通过 HTML5 支持这个东西:(

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

许多现代浏览器=除了 Internet Explorer 之外的所有主流浏览器。我拒绝为其编写代码;如果你也必须在 IE 中拥有同样的东西,你就必须去黑客路线。)

Through JS, my answer would be the same as @ultimatebuster's. However, the whole JS route is hacky, now that alternatives started appearing. Many modern browsers now support this thing directly through HTML5:

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

(Many modern browsers = every major one except the Internet Explorer. I refuse to code for it; if you have to have the same thing in IE as well, you'll have to go the hacky route.)

丶视觉 2024-11-13 17:19:47

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

You could set the type of the input field as password. However, set it to normal via javascript upon page load (this way you can fallback easily if the user doesn't have JS). Once it receives a click, set the type of the input field back to a password.

随梦而飞# 2024-11-13 17:19:47

就像建议的那样,您可以交换输入,但它在 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 = '';
                }
            }
        });
    });
});

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

Like suggested, you can swap the inputs, but it doesn't work in IE. IE won't allow it since it may be some sort of security hole.

I used to use this:

/* 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 = '';
                }
            }
        });
    });
});

I finally just gave up an went with the normal password input behavior. I found the above input swapping to be a bit quirky, but you can give it a shot.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文