Question

我需要创建一个密码对话框，告诉您输入密码然后输入后会显示一个警告对话框，说明您已输入并以星号和普通文本显示密码。我有这一点，但如果我的密码包含空格，则需要它来阻止我输入密码。例如比尔盖茨不应该工作。有人可以请帮助这是我到目前为止。

＆＃13;

<html>
<head>
<title> Password Alert Box</title>
<script type="text/JavaScript">
//declared variables
var input1 = 0;

input1=prompt("Please enter your Password here","Enter Password Here");//made a prompt box to enter the password
var asterisks = (new Array(input1.length+1).join("*"));//converts the password string into asterisks
window.alert("Valid password "+ asterisks + "\n You entered the password " + input1); //outputs the message valid password, along with the string entered in asterisks, also outputs the password in plain text
</script>
</head>
<body>
</body>
</html>

＆＃13;

Answer 1

试试这段代码

function psw() {
    var input1 = prompt("Please enter your Password here","Enter Password Here");

    if(input1.indexOf(" ") > 0) {
        alert('error can not contain spaces');
        psw();
        return false;
    }

    var asterisks = (new Array(input1.length+1).join("*"));

    alert("Valid password "+ asterisks + "\n You entered the password " + input1);
}

psw();

注意：我使用了使用IE9 +

的 indexOf

DEMO

Answer 2

一个对话框。如果您使用的是密码，我会避免使用提示，因为它不如'<input type="password" />'那么安全。这意味着您无法使用提示。请考虑以下事项：

<强> HTML：

<div style="display: none;" id="alert">
    <form>
        <input id="password" type="password" name="password" placeholder="password here" />
        <input id="submit" type="submit" value="Submit" />
    </form>
</div>
<button id="show">Show</button>

<强> JS：

var pass = document.getElementById('password');
pass.onkeyup = function (e) {
    var key = e.keyCode;
    if (key == 32) {
        //spacebar -- so lets clear what has currently been written
        this.value = "";
        alert('Spaces are not allowed, please try again');
    }
}
document.getElementById('show').onclick = function () {
    document.getElementById('alert').style.display = 'block';
}

document.getElementById('submit').onclick = function (e) {
    e.preventDefault();
    alert(pass.value + ' ... ' + (new Array(pass.value.length + 1).join("*")));
}

<强> CSS：

#alert {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1000;
    background-color: red;
    padding: 30px;
}

在这里，我们创建一个＆＃34;浮动＆＃34;框（类似于jQuery中的对话框/模态）。在此框中，您将找到我之前在表单中讨论的输入类型密码。

对于您的情况，您不需要将表单发送到php文件以便进行处理，因此您只需截取表单并在警报中显示密码的值。

DEMO

更新，可以在更改密码值之前截取空格键，而不执行任何操作。例如，您可以使用onkeyup事件并复制相同的代码。如果检测到空格键，您需要做的只是e.preventDefault();，并且空格键不会添加到您的密码值中。

DEMO2 where spacebar is just not added to the password

需要帮助密码对话框Javascript

2 个答案: