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

Question

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

var passwd = prompt("Enter Password : ", "your password here");

我希望在12345输入eg时,它看起来像*****或.....在对话框中.

任何人都可以建议我如何做到这一点或提供一些示例代码？

Answer 1

你在寻找这个prompt功能吗？

var response = prompt("What is your name?");

alert("Hello, " + response);

对话框看起来像这样:

这可能不是获取密码输入的最佳方式,因为它不会屏蔽输入.相反,请考虑使用带有密码输入字段的HTML表单.

也许您正在寻找基本的HTTP身份验证？

您可以通过让您的Web服务器发送一些标题来设置它; 例如使用PHP:

<?php
if (!isset($_SERVER['PHP_AUTH_USER'])) {
    header('WWW-Authenticate: Basic realm="My Realm"');
    header('HTTP/1.0 401 Unauthorized');
    echo 'Text to send if user hits Cancel button';
    exit;
} else {
    echo "<p>Hello {$_SERVER['PHP_AUTH_USER']}.</p>";
    echo "<p>You entered {$_SERVER['PHP_AUTH_PW']} as your password.</p>";
}
?>

这将导致客户端显示如下对话框:

Answer 2

您无法使用JavaScript屏蔽输入 window.prompt()

考虑使用jQuery UI模式表单对话框.

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

Answer 3

目前无法prompt()在 JavaScript 中编辑该函数以使其隐藏文本输入。

相反，我们需要在 HTML 中创建一个弹出窗口并在需要时显示它。我在这里创建了一个极简主义的例子：

var promptCount = 0;
window.pw_prompt = function(options) {
    var lm = options.lm || "Password:",
        bm = options.bm || "Submit";
    if(!options.callback) { 
        alert("No callback function provided! Please provide one.") 
    };

    var prompt = document.createElement("div");
    prompt.className = "pw_prompt";

    var submit = function() {
        options.callback(input.value);
        document.body.removeChild(prompt);
    };

    var label = document.createElement("label");
    label.textContent = lm;
    label.for = "pw_prompt_input" + (++promptCount);
    prompt.appendChild(label);

    var input = document.createElement("input");
    input.id = "pw_prompt_input" + (promptCount);
    input.type = "password";
    input.addEventListener("keyup", function(e) {
        if (e.keyCode == 13) submit();
    }, false);
    prompt.appendChild(input);

    var button = document.createElement("button");
    button.textContent = bm;
    button.addEventListener("click", submit, false);
    prompt.appendChild(button);

    document.body.appendChild(prompt);
};

pw_prompt({
    lm:"Please enter your password:", 
    callback: function(password) {
        alert("Your password is: " + password);
    }
});

很可能您希望它看起来像一个弹出窗口，所以我在这里添加了一些基本的 CSS：

.pw_prompt {
    position:fixed;
    left: 50%;
    top:50%;
    margin-left:-100px;
    padding:15px;
    width:200px;
    border:1px solid black;
}
.pw_prompt label {
    display:block; 
    margin-bottom:5px;
}
.pw_prompt input {
    margin-bottom:10px;
}

总之，你得到了这个演示

Answer 4

您应该password在表单元素中使用带有type的input 元素:

<input name="myPass" id="myPass" type="password" />