How can I hide the password entered via a JavaScript dialog prompt?

Question

How can I hide the password entered by a user in a dialog prompt in JavaScript? For example, using something like

var passwd = prompt(\"Enter Password : \",          


        

Answer 1

You should use an input element with type password in a form element:

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

Answer 2

The only way to block the input of a password is to use <input type="password">. Here's an example of how to make this a popup dialog:

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

Answer 3

As of many answers you can't mask the input with a JavaScript prompt() but some alternative way to done this functionality using custom solution or use password input box instead.

jQuery UI - Dialog Modal Form

Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.

Ref : Dialog Modal Form

jQuery Impromptu plugin

Using html option you write html tags.

Ref : Impromptu Plugin

Using JavaScript

Only by opening a little window containing a password form field:

<script language="JavaScript"><!--
function getPassword() {
    WinId = window.open('','newwin','width=100,height=100');
    if (!WinId.opener) WinId.opener = self;
    Text = '<form ';
    Text += 'onSubmit="opener.location=this.password.value + \'.html\'; self.close()">';
    Text += '<input type="password" name="password">';
    Text += '<\/form>';
    WinId.document.open();
    WinId.document.write(Text);
    WinId.document.close();
}
//--></script>

Ref : irt.org