Javascript 或 JQuery 密码提示

Question

我在网上发现了类似的问题，但没有可行的解决方案。

如标题所示，我的问题是如何利用 jQuery 或 Javascript 创建 密码提示 ，例如，按钮被点击。

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

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

我想要类似下图的东西！

Answer 1

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

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
}

显然，如果您要追求与您正在使用的 window 相同的外观和感觉，您需要应用一些 CSS 和 JavaScript让它更多 'pretty' 以便它反映出你想要的东西。

Javascript 或 JQuery 密码提示

Javascript or JQuery Password Prompt

javascript

jquery

passwords

prompt