Javascript 或 JQuery 密码提示答案

【问题标题】：Javascript or JQuery Password PromptJavascript 或 JQuery 密码提示
【发布时间】：2015-06-06 20:37:28
【问题描述】：

我在网上找到了类似的问题，但不是一个可行的解决方案。

正如标题所暗示的，我的问题是如何利用 jQuery 或 Javascript 来创建 密码提示，例如，当单击按钮时。

所以下面，但不是显示文本，我希望文本字段充当密码字段。

var pass1 = 'hello123';
password=prompt('Please enter password to view page')    
if (password==pass1)
   alert('password correct! Press ok to continue.')

我想要类似下图的东西！

【问题讨论】：

向某人询问他们可以在您的代码中看到的密码似乎并不是特别有用...但是如果您真的想要，那么您可以使用一些东西就像一个 jQuery 模态对话框。您所做的只是用一些表单元素在页面上覆盖div，并处理该表单中的按钮点击。所有这些都是基本的 jQuery 功能。
那个窗口不是JS，是HTTP Basic Auth
@David 是的。这是出于演示目的。
@zerkms 这可以用 jQuery 或 Javascript 完成吗？
在前端级别进行密码验证的问题是最终用户可以通过在他们的浏览器上禁用javascript来绕过整个过程。这就是为什么我们需要后端代码来在服务器端验证来自客户端的经过验证的请求。

标签： javascript jquery passwords prompt

【解决方案1】：

您可以做的一件事（如@David 提到的）是使用模型窗口或子窗口来生成要填写的表单。

HTML

<!DOCTYPE Html />
<html>
    <head>
        <title></title>
    </head>
    <body>
        <input type="button" id="prompt" value="Click for authentication prompt"/>
        <script type="text/javascript" src="theJS.js"></script>
    </body>
</html>

JAVASCRIPT

var theButton = document.getElementById("prompt");

theButton.onclick = function () {
    var thePrompt = window.open("", "", "widht=500");
    var theHTML = "";

    theHTML += "<p>The server http://localhost:8888 requires a username and password. The server says: These are restricted files, please authenticate yourself.</p>";
    theHTML += "<br/>";
    theHTML += "Username: <input type='text' id='theUser' placeholder='Enter Username...'/>";
    theHTML += "<br />";
    theHTML += "Password: <input type='text' id='thePass' placeholder='Enter Password...'/>";
    theHTML += "<br />";
    theHTML += "<input type='button' value='OK' id='authOK'/>";
    thePrompt.document.body.innerHTML = theHTML;

    var theUser = thePrompt.document.getElementById("theUser").value;
    var thePass = thePrompt.document.getElementById("thePass").value;
    thePrompt.document.getElementById("authOK").onclick = function () {
        doAuthentication(theUser, thePass);
    }
}

function doAuthentication(user, pass) {
    //do authentication
}

显然，如果您要追求与您正在使用的窗口相同的外观和感觉，您将需要应用一些 CSS 和 JavaScript 使其更“漂亮”，以便它反映您的实际情况去。

【讨论】：