Как скрыть пароль, введенный пользователем в диалоговом окне в JavaScript. Например, используя что-то вроде
var passwd = prompt("Enter Password : ", "your password here");
Я хотел бы это, когда, например, 12345 вводится в диалоговом окне как ***** или ......
Может ли кто-нибудь предложить, как я могу это сделать или предоставить примерный код?
Вы ищете функцию 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>";
}
?>
Это приведет к тому, что клиент отобразит диалоговое окно, подобное этому:
Вы не можете замаскировать ввод с помощью JavaScript window.prompt()
Рассмотрим использование диалогового окна модальной формы интерфейса jQuery.
Вы должны использовать элемент ввода с типом password в элементе формы:
<input name="myPass" id="myPass" type="password" />
Единственный способ заблокировать ввод пароля - использовать <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);
};
В настоящее время нет способа редактировать функцию 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;
}
В целом вы получаете эту демонстрацию
Я попытался решить ту же проблему следующим образом:
На главной странице пользователь должен нажать кнопку, чтобы запустить запрос
нажатие кнопки откроет всплывающие окна командой 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 главной страницы выполнять намеченное действие.
Как и во многих ответах, вы не можете замаскировать вход с помощью 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
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()
}
}