Question

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

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

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

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

我想要类似下图的内容。！

enter image description here

Answer 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来使其更加“漂亮”。＃39;所以它反映了你的目标。

Javascript或JQuery密码提示

1 个答案: