20
如何隐藏用户在JavaScript中的对话框提示中输入的密码。例如，使用类似如何隐藏通过Javascript对话框提示输入的密码？
var passwd = prompt("Enter Password : ", "your password here");
我想，当例如，在对话框中输入12345它将显示为*****或.....。
任何人都可以建议如何做到这一点或提供一些示例代码？
A
回答
6
你应该在一个表单元素使用带有password类型的输入元素：
<input name="myPass" id="myPass" type="password" />
10
您是否在寻找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>";
}
?>
这将导致客户端显示这样一个对话框：
+0
感谢您的回复。我有一个popup ...，我想在弹出 – 2012-03-04 13:08:10
+0
@PrasathPree用户的密码不受欢迎。我是否理解你的问题，还是你在寻找其他的东西？ – 2012-03-04 13:11:14
+0
好的.. 感谢您的建议 – 2012-03-04 13:13:40
-14
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()
}
}
+12
请解释你的代码如何回答这个问题... – 2013-01-02 22:20:00
+0
这种方式并不安全;该问题要求密码框看起来像 – Stardust 2016-02-15 19:01:23
9
+8
没有jQuery标签，请不要使用它。 – 2013-08-05 17:47:59
+16
@CharlesJohnThompsonIII 这将是一个可能的解决方案，以防他不知道的情况 – 2013-09-24 07:49:28
+3
Thanks @TimeSheep。这就是为什么我使用“考虑”这个词。 – 2015-10-28 16:07:09
-1
我试图解决下列方式同样的问题：
在主要页面的用户应以发起请求 按下一个按钮，将打开一个弹出按下一个按钮由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完成预期的操作。
3
阻止输入密码的唯一方法是使用<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);
};
+0
你真的应该把CSS应用到style标记中，而不是在JS中......并且请不要使用'
'来设计元素的样式 –
2015-02-11 17:52:04
+1
@ZachSaucier将CSS和JS一起使用没有什么问题。如果有的话，为什么DOM（和jQuery）会让你这样做。 （看看React.js和Angular是如何工作的。）我为了简单起见，所以任何人都可以复制并粘贴我的答案。至于使用'
'标签，你是对的，我可以使用保证金或填充。 –
Luc
2015-02-11 18:16:48
1
目前还没有办法来编辑prompt()功能在JavaScript中，使其隐藏的文本输入。
相反，我们需要在HTML中创建一个弹出窗口并在需要时显示它。我创建了一个简约的例子here：
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;
}
总之，你得到this demo
-1
作为很多答案，您不能使用JavaScript屏蔽输入，但使用自定义解决方案完成此功能的一些替代方法或使用密码输入而不是。
jQuery UI的 - 对话框模式窗体
使用一个模式对话框，要求用户在一个多步骤的过程中输入的数据。在内容区域嵌入表单标记，将模式选项设置为true，并使用按钮选项指定主用户和辅助用户操作。
的jQuery插件即兴
使用你写html标签html选项。
使用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
相关问题
- 1. 在对话框/提示中输入密码
- 2. 开始活动并通过对话框输入密码
- 3. 进入后隐藏输入文本，输入后隐藏密码
- 4. JavaScript提示输入密码（即*******）
- 5. 确认jQuery UI的提示对话框中输入密钥
- 6. ASP.NET隐藏输入密码的长度
- 7. .htaccess提示输入密码
- 8. 隐藏对话框后，另一个对话框也隐藏
- 9. 如何从Mac/UNIX Shell脚本中提示的osascript对话框中隐藏密码
- 10. 如何用密码术隐藏javascript？
- 11. Python：如何在屏幕上输入密码时“星号输出”/隐藏密码？
- 12. 如何隐藏EA属性对话框？
- 13. shell脚本（通过cron运行）在提示时输入密码
- 14. Codeigniter - 如何显示通过ajax输入密码后的信息
- 15. 如何提示在matlab中输入矩阵元素的输入对话框？
- 16. 隐藏打印对话框
- 17. 隐藏MFC对话框
- 18. 如何使用Jquery的Coolinput在密码字段中显示提示“输入密码”，但在用户键入时使用星号隐藏输入？
- 19. 如何在javascript中隐藏警示框
- 20. 通过Javascript发送Command.Value代码隐藏
- 21. 如何通过JavaScript取消隐藏隐藏的ASP元素？
- 22. 密码的隐形输入？
- 23. 传递复选框值显示/隐藏密码通过反应本地
- 24. 如何隐藏显示输入？
- 25. PNotify提示的密码输入
- 26. Primefaces输入密钥关闭对话框
- 27. 双的JavaScript对话框提示
- 28. 如何通过复选框隐藏并显示我的div
- 29. 如何通过javascript显示隐藏的div？
- 30. 如何通过braintree.js创建隐藏的'payment_method_nonce'输入？
他询问如何在JavaScript中做这个'' prompt（）'，而不是HTML''。 – william44isme 2013-06-20 15:08:31
，并且没有办法做到他单独使用javascript所要求的内容，因此他们正在提供替代方案。 – ThatAintWorking 2013-11-13 18:49:19
是的，只有另一种方式是使用这种密码输入模式像Bootstrap或其他东西。 – 2013-11-16 01:38:30