首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何隐藏通过JavaScript对话框提示输入的密码?

如何隐藏通过JavaScript对话框提示输入的密码?
EN

Stack Overflow用户
提问于 2012-03-04 20:49:59
回答 6查看 103.3K关注 0票数 35

如何在JavaScript的对话框提示中隐藏用户输入的密码?例如,使用类似于

代码语言:javascript
复制
var passwd = prompt("Enter Password : ", "your password here");

例如,当输入12345时,我希望在对话框中显示为*****.....

有没有人能建议我怎么做,或者提供一些示例代码?

EN

回答 6

Stack Overflow用户

发布于 2013-04-05 18:30:25

不能使用JavaScript window.prompt()屏蔽输入

考虑使用jQuery UI模式窗体对话框。

http://jqueryui.com/dialog/#modal-form

票数 15
EN

Stack Overflow用户

发布于 2014-06-29 07:57:51

阻止输入密码的唯一方法是使用<input type="password">。下面是一个如何使其成为弹出对话框的示例:

代码语言:javascript
复制
/*
JavaScript Password Prompt by Luc (luc@ltdinteractive.com)
Originaly posted to http://stackoverflow.com/questions/9554987/how-can-i-hide-the-password-entered-via-a-javascript-dialog-prompt
This code is Public Domain :)

Syntax:
password_prompt(label_message, button_message, callback);
password_prompt(label_message, button_message, width, height, callback);

Example usage:
password_prompt("Please enter your password:", "Submit", function(password) {
    alert("Your password is: " + password);
});
*/
window.password_prompt = function(label_message, button_message, arg3, arg4, arg5) {

    if (typeof label_message !== "string") var label_message = "Password:";
    if (typeof button_message !== "string") var button_message = "Submit";
    if (typeof arg3 === "function") {
        var callback = arg3;
    }
    else if (typeof arg3 === "number" && typeof arg4 === "number" && typeof arg5 === "function") {
        var width = arg3;
        var height = arg4;
        var callback = arg5;
    }
    if (typeof width !== "number") var width = 200;
    if (typeof height !== "number") var height = 100;
    if (typeof callback !== "function") var callback = function(password){};

    var submit = function() {
        callback(input.value);
        document.body.removeChild(div);
        window.removeEventListener("resize", resize, false);
    };
    var resize = function() {
        div.style.left = ((window.innerWidth / 2) - (width / 2)) + "px";
        div.style.top = ((window.innerHeight / 2) - (height / 2)) + "px";
    };

    var div = document.createElement("div");
    div.id = "password_prompt";
    div.style.background = "white";
    div.style.color = "black";
    div.style.border = "1px solid black";
    div.style.width = width + "px";
    div.style.height = height + "px";
    div.style.padding = "16px";
    div.style.position = "fixed";
    div.style.left = ((window.innerWidth / 2) - (width / 2)) + "px";
    div.style.top = ((window.innerHeight / 2) - (height / 2)) + "px";

    var label = document.createElement("label");
    label.id = "password_prompt_label";
    label.innerHTML = label_message;
    label.for = "password_prompt_input";
    div.appendChild(label);

    div.appendChild(document.createElement("br"));

    var input = document.createElement("input");
    input.id = "password_prompt_input";
    input.type = "password";
    input.addEventListener("keyup", function(e) {
        if (event.keyCode == 13) submit();
    }, false);
    div.appendChild(input);

    div.appendChild(document.createElement("br"));
    div.appendChild(document.createElement("br"));

    var button = document.createElement("button");
    button.innerHTML = button_message;
    button.addEventListener("click", submit, false);
    div.appendChild(button);

    document.body.appendChild(div);
    window.addEventListener("resize", resize, false);
};
票数 4
EN

Stack Overflow用户

发布于 2012-03-04 20:52:15

您应该在表单元素中使用类型为password的输入元素:

代码语言:javascript
复制
<input name="myPass" id="myPass" type="password" />
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9554987

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档