JavaScript或JQuery密码提示

Question

JavaScript或JQuery密码提示

5

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

正如标题所示，我的问题是如何利用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

- Mohammad Najar

2

似乎向某人请求在你的代码中可以看到的密码并不特别有用...但如果你真的想要，那么你可以使用类似jQuery模态对话框的东西。你所做的只是在页面上覆盖一个div，其中包含一些表单元素，并处理该表单内的按钮点击。所有这些都是基本的jQuery功能。 - David

3

那个窗口不是JS，而是HTTP基本身份验证。 - zerkms

@David 是的。这只是为了演示目的。 - Mohammad Najar

@zerkms 这个可以用 jQuery 或者 Javascript 来完成吗？ - Mohammad Najar

完全一样 - 不是。 - zerkms

1

在前端层面进行密码验证的问题在于，最终用户可以通过在浏览器上禁用JavaScript来规避整个过程。这就是为什么我们需要后端代码来验证客户端在服务器端级别上的已验证请求。 - Sai

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mwilson · Accepted Answer

您可以像 @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来使其更加“漂亮”，以便它反映出您所追求的效果。