Javascript或JQuery密码提示 [英] Javascript or JQuery Password Prompt
问题描述
我在网上发现了类似的问题，但不是可行的解决方案.
I've found similar questions on the net, but not a viable solution to them.
正如标题所示，我的问题是，例如，当单击按钮时，如何利用jQuery或Javascript创建密码提示.
My question, as the title suggests, is how could I leverage jQuery or Javascript to create a password prompt when, for example, a button is clicked.
下面是，但我不想显示文本，而是希望文本字段充当密码字段.
So the following, but instead of showing the text, I'd like the text field act as a password field.
var pass1 = 'hello123';
password=prompt('Please enter password to view page')
if (password==pass1)
alert('password correct! Press ok to continue.')
我想要类似下图的东西！！
I want something similar to the following image.!
推荐答案
您可以做的一件事情(如提到的@David)是使用模型窗口或子窗口来生成要填写的表单.
One thing you could do (like @David mentioned) is use a model window or a child window to spawn off a form to fill out.
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使其更漂亮"，以使其与您的显示相同
Obviously, if you're going after the same look and feel of the window you're working with, you'll want to apply some CSS and JavaScript to make it more 'pretty' so that it mirrors what you're going for.
这篇关于Javascript或JQuery密码提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
