Как скрыть пароль, введенный с помощью диалогового окна Javascript?

Ответ 1

Вы ищете функцию prompt?

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

alert("Hello, " + response);

Диалог будет выглядеть примерно так:

Это, вероятно, не лучший способ получить пароль, потому что он не маскирует вход. Вместо этого рассмотрите возможность использования формы HTML с полем ввода пароля.

Может быть, вы ищете базовую HTTP-аутентификацию?

Вы можете установить это, получив веб-сервер для отправки нескольких заголовков; например, с 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>";
}
?>

Это приведет к тому, что клиент отобразит диалоговое окно, подобное этому:

Ответ 2

Вы не можете замаскировать ввод с помощью JavaScript window.prompt()

Рассмотрим использование диалогового окна модальной формы интерфейса jQuery.

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

Ответ 3

Вы должны использовать элемент ввода с типом password в элементе формы:

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

Ответ 4

Единственный способ заблокировать ввод пароля - использовать <input type="password">. Вот пример того, как сделать это всплывающее диалоговое окно:

/*
JavaScript Password Prompt by Luc ([email protected])
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);
};

Ответ 5

В настоящее время нет способа редактировать функцию 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;
}

В целом вы получаете эту демонстрацию

Ответ 6

Я попытался решить ту же проблему следующим образом:

На главной странице пользователь должен нажать кнопку, чтобы запустить запрос нажатие кнопки откроет всплывающие окна командой JavaScript window.open("password.html","passwordRequest",windowStyleVar),  где windowStyleVar может быть:

var windowStyleVar = "top=10, left=10, width=250, height=200, status=no, 
                     menubar=no, toolbar=no scrollbars=no";

password.html выглядит так:

<html>
<head>
    <title>Richiesta password</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function andiamo()
        {
            //pass the password to the main page "THeForm" form to <input type="hidden" name="vpassword" value="">
    window.opener.document.getElementById('TheForm').vpassword.value=document.getElementById("picchio").value;
    // launch the javascript function processRequest() in order to compare password and whatever You need in the main page 
            window.opener.processRequest();
            window.close();
        }
    </script>
</head>
<body>
    <div>type the password <input type="password" name="picchio" id="picchio"><input type="button" value="ok?" onclick="andiamo();"></div>
</body>

Вызов window.opener.processRequest() очень важен, так как он возвращает элемент управления на главную страницу, заставляя javascript главной страницы выполнять намеченное действие.

Ответ 7

Как и во многих ответах, вы не можете замаскировать вход с помощью JavaScript prompt(), но альтернативный способ выполнить эту функцию с помощью пользовательского решения или использовать поле ввода пароля.

jQuery UI - формальная форма диалога

Используйте модальный диалог, чтобы потребовать, чтобы пользователь вводил данные во время многоэтапного процесса. Вставьте разметку формы в области содержимого, установите для модальной опции значение true и укажите первичные и вторичные действия пользователя с помощью кнопки.

Ссылка: Диалоговая модальная форма

Плагин jQuery Impromptu

Используя параметр html, вы пишете теги html.

Ссылка: Плагин Impromptu

Использование JavaScript

Только открыв небольшое окно, содержащее поле формы пароля:

<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>

Ссылка: irt.org

Ответ 8

alert("Username=Bob/Password=Pass <punctuation counts!>");

var user=prompt("Username")
var pass=prompt("Password")

if (user!=="Bob")
{
    alert("Login was unsuccessful")
}
else
{
    if (pass!=="Pass")
    {
        alert("Login was unsuccessful")
        window.history.back()
    }
}