检查密码输入以启用按钮的Javascript

Javascript that checks for password input to enable a button

本文关键字：按钮 Javascript 启用 密码 输入 检查      更新时间：2023-09-26

我的第一个问题没有提出，希望我能做得更好。

"我刚刚学会了HTML/CSS的基本知识，但几乎不知道javascript。我正在制作一个网站，在这个网站上我有一个密码框，里面有一个链接按钮（默认情况下禁用），可以通往另一个页面。我的难题是如何制作一个密码，当输入时可以启用该按钮，以便进入另一个网页。很抱歉我提出了一个很难回答的问题，但我在编程界太新了。"。"

所以我要做的html部分是：

<div class="whole">
        <div>
            <input type="password" placeholder="PASSWORD" required id="password" class="pass">
        </div>
        <div>
            <a href="link">
                <button class="button" id="button" type="submit" disabled>Click me!!!</button>
            </a>
        </div>
    </div>

通过研究和我自己对剧本所能做的就是：

<script>
        var pass1 = "pass";
        var pass2 = document.getElementById("password");
        if (pass1 == pass2) {
            document.getElementById("button").disabled = false;
        }
    </script>

再次为我的笨拙感到抱歉
谢谢！！！：）

<div class="whole">
    <div>
        <input type="password" placeholder="PASSWORD" required id="password" onkeyup="check()" class="pass">
    </div>
    <div>
        <a href="link">
            <button class="button" id="button" type="submit" disabled="true">Click me!!!</button>
        </a>
    </div>
</div>

  <script type="text/javascript">
    var pass1 = "pass";
    function check(){
       var pass2 = document.getElementById("password").value;
         if (pass1 == pass2) {
                 document.getElementById("button").disabled = false;
       }
    }

我创建了一个小提琴，检查一下，我希望它能在中工作

https://jsbin.com/qozawoj/edit?html，js，输出

<div class="whole">
    <div>
      <input type="password" placeholder="PASSWORD" required id="password" class="pass" onkeyup="check()">
    </div>
    <div>
      <button class="button" id="button" type="submit" onclick="go()" disabled="true">Click me!!!</button>
    </div>
  </div>

JS-

var pass1 = "pass";
var pass2 = document.getElementById("password");
function check(){
  if (pass1 == pass2.value) {
       document.getElementById("button").disabled = false;
        }
}
function go (){
  alert('go');
}

您已经很接近了，您还需要一些东西。

使用// inline comments签出以下代码：

function myCheck(){ // called everytime password is entered
  var pass1 = "pass";
  var pass2 = document.getElementById("password").value;  // you missed "value" !
  if (pass1 == pass2) {
    document.getElementById("button2").disabled = false;  // enable link here
  }
}
<div class="whole">
  <div>
    <input type="password" placeholder="PASSWORD" required id="password" class="pass" onkeyup="myCheck()"> <!-- myCheck() is called everytime the keyboard key goes from down to up -->
  </div>
  <div>
    <a id="button2" href="http://rahul-desai3.github.io/chat/" disabled>button</a> <!-- notice the "disabled" attribute and NO <button> element -->
  </div>
</div>

要使链接看起来像一个按钮，请使用CSS。

相关文章：