密码切换视图按钮在其他选项卡上不起作用

时间：2021-03-23 01:27:13

标签： javascript html css input

我一直在关注标签页的 w3schools 教程，然后使用另一个教程来制作密码切换按钮。它在初始选项卡（登录选项卡）上完美运行，但在其余选项卡上，密码切换按钮停止工作。我不知道为什么它停止工作。我将它用于 python 应用程序的用户界面。在这个阶段，我只是在尝试设计 ui。请记住，我对 html/css/java 还是很陌生，所以你可能会发现很多新手错误。非常感谢任何帮助！

HTML：

<!DOCTYPE html>
<html>
<head>
    <!--- IMPORT STYLESHEET --->
    <link rel="stylesheet" href="style.css">
</head>

<!--- START --->

<body>
<div class="window">

    <!--- TAB MENU BAR --->
    <div>
        <div class="tabmenu">
            <button class="tablinkers" onclick="openPage(event, 'Login')" id="defaultOpen">Login</button>
            <button class="tablinkers" onclick="openPage(event, 'Register')">Register</button>
            <button class="tablinkers" onclick="openPage(event, 'Renew')">Renew</button>
            <button class="tablinkers" onclick="openPage(event, 'Help')">Help</button>
        </div>
    </div>

    <!--- LOGIN --->
    <div id="Login" class="tabpane">
        <form>
            <input type="text" class="typetext" name="usernameLogin" placeholder="Username"><br>
            <div class="input-container">
                <input type="password" name="passwordLogin" placeholder="Password">
                <i class="material-icons visibility">visibility_off</i>
            </div>
            <input type="submit" class="buttoncss" name="buttonRegister">
        </form>
    </div>

    <!--- REGISTER --->
    <div id="Register" class="tabpane">
        <form>
            <input type="email" class="typetext" name="emailRegister" placeholder="Email"><br>
            <input type="text" class="typetext" name="usernameRegister" placeholder="Username"><br>
            <div class="input-container">
                <input type="password" placeholder="Password">
                <i class="material-icons visibility">visibility_off</i>
            </div>
            <input type="text" class="typetext" name="licensekeyRegister" placeholder="License Key"><br>
            <input type="submit" name="buttonRegister">
        </form>
    </div>

    <!--- RENEW --->
    <div id="Renew" class="tabpane">
        <form>
            <input type="text" class="typetext" name="usernameRenew" placeholder="Username"><br>
            <div class="input-container">
                <input type="password" name="passwordLogin" placeholder="Password">
                <i class="material-icons visibility">visibility_off</i>
            </div>
            <input type="text" class="typetext" name="licensekeyRenew" placeholder="License Key"><br>
            <input type="submit" name="buttonRegister">
        </form>
    </div>

    <!--- HELP --->
    <div id="Help" class="tabpane">
        help
    </div>

</div>
<!--- IMPORT JAVA --->
<script src="java.js"></script>
</body>
</html>

CSS：

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* START CSS FOR TABS */

/* Define window size. Change before release. */
.window {
    border: 1px solid black
}

/* Container holding tab buttons */
.tabmenu {
    display:flex;
    align-items:center;
    flex-direction:column;
    float: left;
}

/* The tab buttons */
.tabmenu button {
    outline: none;
    background-color: #4CAF50;
    vertical-align: middle;
    color: white;
    display: inline-block;
    text-align: left;
    padding: 5px;
    height: 32px;
    width: 80px;
    border: 0px; /* Button border. */
}

.tabmenu button:hover {
    background-color: #7289da;
}

.tabmenu button:active {
    background-color: firebrick;
}

.tabmenu button:not(:last-child) {
    border-bottom: none;
}

.tabpane {
    border: 1px solid black;
}

/* START CSS FOR LINE EDIT, PASSWORD, PWD TOGGLE, BUTTON */

/* Line Edit Class (type="text") */
.typetext {
    text-align: left;
    color: black;
    font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
}

/* Password Class (type="password") */
.input-container {
    display: flex;
    align-items: center;
    font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
}
.input-container input {
    text-align: left;
    outline: none;
    color: #333;
    font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
}
i {
    position: absolute;
    color: #aaa;
    cursor: default;
    margin-left: 180px;
}

JavaScript：

// START JAVA FOR TABS
function openPage(evt, pageName) {
    //Declare variables
    var i, tabpane, tablinkers;

    // Get all elements with class="tabpane" and hide them
    tabpane = document.getElementsByClassName("tabpane");
    for (i = 0; i < tabpane.length; i++) {
        tabpane[i].style.display = "none";
    }

    // Get all elements with class="tablinkers" and remove the class active
    tablinkers = document.getElementsByClassName("tablinkers")
    for (i = 0; i < tablinkers.length; i++) {
        tablinkers[i].className = tablinkers[i].className.replace(" active", "")
    }

    // Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(pageName).style.display = "block";
    evt.currentTarget.className += " active";


}
document.getElementById("defaultOpen").click();


// START JAVA FOR PWD TOGGLE
const visibilityToggle = document.querySelector('.visibility');

const input = document.querySelector('.input-container input');

var password = true;

visibilityToggle.addEventListener('click', function() {
    if (password) {
        input.setAttribute('type', 'text');
        visibilityToggle.innerHTML = 'visibility';
    } else {
        input.setAttribute('type', 'password');
        visibilityToggle.innerHTML = 'visibility_off';
    }
    password = !password;

});

2 个答案:

答案 0 :(得分：1)

您的 addEventListener 仅将事件侦听器应用于第一个元素，因为 querySelector 仅以分层顺序返回第一个元素，而不是 querySelectorAll，后者返回一个数组。

下面的代码使用了 jQuery，因为它是最高效的。如果您愿意，我可以将其转换为纯 JS。

// START JAVA FOR TABS
function openPage(evt, pageName) {
    //Declare variables
    var i, tabpane, tablinkers;

    // Get all elements with class="tabpane" and hide them
    tabpane = document.getElementsByClassName("tabpane");
    for (i = 0; i < tabpane.length; i++) {
        tabpane[i].style.display = "none";
    }

    // Get all elements with class="tablinkers" and remove the class active
    tablinkers = document.getElementsByClassName("tablinkers")
    for (i = 0; i < tablinkers.length; i++) {
        tablinkers[i].className = tablinkers[i].className.replace(" active", "")
    }

    // Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(pageName).style.display = "block";
    evt.currentTarget.className += " active";

}
document.getElementById("defaultOpen").click();


// START JAVA FOR PWD TOGGLE
const visibilityToggle = document.querySelector('.visibility');

$('.visibility').on('click', function() {
    let elem = $('input', $(this).parent());
    let cur = elem.attr('type');
    if (cur == "password") {
        elem.attr('type', 'text');
    } else {
        elem.attr('type', 'password');
    }
})
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* START CSS FOR TABS */


/* Define window size. Change before release. */

.window {
  border: 1px solid black
}


/* Container holding tab buttons */

.tabmenu {
  display: flex;
  align-items: center;
  flex-direction: column;
  float: left;
}


/* The tab buttons */

.tabmenu button {
  outline: none;
  background-color: #4CAF50;
  vertical-align: middle;
  color: white;
  display: inline-block;
  text-align: left;
  padding: 5px;
  height: 32px;
  width: 80px;
  border: 0px;
  /* Button border. */
}

.tabmenu button:hover {
  background-color: #7289da;
}

.tabmenu button:active {
  background-color: firebrick;
}

.tabmenu button:not(:last-child) {
  border-bottom: none;
}

.tabpane {
  border: 1px solid black;
}


/* START CSS FOR LINE EDIT, PASSWORD, PWD TOGGLE, BUTTON */


/* Line Edit Class (type="text") */

.typetext {
  text-align: left;
  color: black;
  font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
}


/* Password Class (type="password") */

.input-container {
  display: flex;
  align-items: center;
  font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
}

.input-container input {
  text-align: left;
  outline: none;
  color: #333;
  font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
}

i {
  position: absolute;
  color: #aaa;
  cursor: default;
  margin-left: 180px;
}
<!DOCTYPE html>
<html>

<head>
  <!--- IMPORT STYLESHEET --->
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<!--- START --->

<body>
  <div class="window">

    <!--- TAB MENU BAR --->
    <div>
      <div class="tabmenu">
        <button class="tablinkers" onclick="openPage(event, 'Login')" id="defaultOpen">Login</button>
        <button class="tablinkers" onclick="openPage(event, 'Register')">Register</button>
        <button class="tablinkers" onclick="openPage(event, 'Renew')">Renew</button>
        <button class="tablinkers" onclick="openPage(event, 'Help')">Help</button>
      </div>
    </div>

    <!--- LOGIN --->
    <div id="Login" class="tabpane">
      <form>
        <input type="text" class="typetext" name="usernameLogin" placeholder="Username"><br>
        <div class="input-container">
          <input type="password" name="passwordLogin" placeholder="Password">
          <i class="material-icons visibility">visibility_off</i>
        </div>
        <input type="submit" class="buttoncss" name="buttonRegister">
      </form>
    </div>

    <!--- REGISTER --->
    <div id="Register" class="tabpane">
      <form>
        <input type="email" class="typetext" name="emailRegister" placeholder="Email"><br>
        <input type="text" class="typetext" name="usernameRegister" placeholder="Username"><br>
        <div class="input-container">
          <input type="password" placeholder="Password">
          <i class="material-icons visibility">visibility_off</i>
        </div>
        <input type="text" class="typetext" name="licensekeyRegister" placeholder="License Key"><br>
        <input type="submit" name="buttonRegister">
      </form>
    </div>

    <!--- RENEW --->
    <div id="Renew" class="tabpane">
      <form>
        <input type="text" class="typetext" name="usernameRenew" placeholder="Username"><br>
        <div class="input-container">
          <input type="password" name="passwordLogin" placeholder="Password">
          <i class="material-icons visibility">visibility_off</i>
        </div>
        <input type="text" class="typetext" name="licensekeyRenew" placeholder="License Key"><br>
        <input type="submit" name="buttonRegister">
      </form>
    </div>

    <!--- HELP --->
    <div id="Help" class="tabpane">
      help
    </div>

  </div>
  <!--- IMPORT JAVA --->
  <script src="java.js"></script>
</body>

</html>

在普通 JS 中：

// START JAVA FOR TABS
function openPage(evt, pageName) {
    //Declare variables
    var i, tabpane, tablinkers;

    // Get all elements with class="tabpane" and hide them
    tabpane = document.getElementsByClassName("tabpane");
    for (i = 0; i < tabpane.length; i++) {
        tabpane[i].style.display = "none";
    }

    // Get all elements with class="tablinkers" and remove the class active
    tablinkers = document.getElementsByClassName("tablinkers")
    for (i = 0; i < tablinkers.length; i++) {
        tablinkers[i].className = tablinkers[i].className.replace(" active", "")
    }

    // Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(pageName).style.display = "block";
    evt.currentTarget.className += " active";

}
document.getElementById("defaultOpen").click();


// START JAVA FOR PWD TOGGLE
const visibilityToggles = document.querySelectorAll('.visibility');

for(var i = 0; i < visibilityToggles.length; i++){
  visibilityToggles[i].addEventListener("click", togglePasswordVisible);
}

function togglePasswordVisible(e){
  var input = (e.target).parentElement.getElementsByTagName("input")[0];
  if(input.type == "password"){
    input.type="text";
    e.target.innerHTML = "visibility";
  }else{
    input.type="password";
    e.target.innerHTML = "visibility_off";
  }
}
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* START CSS FOR TABS */


/* Define window size. Change before release. */

.window {
  border: 1px solid black
}


/* Container holding tab buttons */

.tabmenu {
  display: flex;
  align-items: center;
  flex-direction: column;
  float: left;
}


/* The tab buttons */

.tabmenu button {
  outline: none;
  background-color: #4CAF50;
  vertical-align: middle;
  color: white;
  display: inline-block;
  text-align: left;
  padding: 5px;
  height: 32px;
  width: 80px;
  border: 0px;
  /* Button border. */
}

.tabmenu button:hover {
  background-color: #7289da;
}

.tabmenu button:active {
  background-color: firebrick;
}

.tabmenu button:not(:last-child) {
  border-bottom: none;
}

.tabpane {
  border: 1px solid black;
}


/* START CSS FOR LINE EDIT, PASSWORD, PWD TOGGLE, BUTTON */


/* Line Edit Class (type="text") */

.typetext {
  text-align: left;
  color: black;
  font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
}


/* Password Class (type="password") */

.input-container {
  display: flex;
  align-items: center;
  font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
}

.input-container input {
  text-align: left;
  outline: none;
  color: #333;
  font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
}

i {
  position: absolute;
  color: #aaa;
  cursor: default;
  margin-left: 180px;
}
<!DOCTYPE html>
<html>

<head>
  <!--- IMPORT STYLESHEET --->
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<!--- START --->

<body>
  <div class="window">

    <!--- TAB MENU BAR --->
    <div>
      <div class="tabmenu">
        <button class="tablinkers" onclick="openPage(event, 'Login')" id="defaultOpen">Login</button>
        <button class="tablinkers" onclick="openPage(event, 'Register')">Register</button>
        <button class="tablinkers" onclick="openPage(event, 'Renew')">Renew</button>
        <button class="tablinkers" onclick="openPage(event, 'Help')">Help</button>
      </div>
    </div>

    <!--- LOGIN --->
    <div id="Login" class="tabpane">
      <form>
        <input type="text" class="typetext" name="usernameLogin" placeholder="Username"><br>
        <div class="input-container">
          <input type="password" name="passwordLogin" placeholder="Password">
          <i class="material-icons visibility">visibility_off</i>
        </div>
        <input type="submit" class="buttoncss" name="buttonRegister">
      </form>
    </div>

    <!--- REGISTER --->
    <div id="Register" class="tabpane">
      <form>
        <input type="email" class="typetext" name="emailRegister" placeholder="Email"><br>
        <input type="text" class="typetext" name="usernameRegister" placeholder="Username"><br>
        <div class="input-container">
          <input type="password" placeholder="Password">
          <i class="material-icons visibility">visibility_off</i>
        </div>
        <input type="text" class="typetext" name="licensekeyRegister" placeholder="License Key"><br>
        <input type="submit" name="buttonRegister">
      </form>
    </div>

    <!--- RENEW --->
    <div id="Renew" class="tabpane">
      <form>
        <input type="text" class="typetext" name="usernameRenew" placeholder="Username"><br>
        <div class="input-container">
          <input type="password" name="passwordLogin" placeholder="Password">
          <i class="material-icons visibility">visibility_off</i>
        </div>
        <input type="text" class="typetext" name="licensekeyRenew" placeholder="License Key"><br>
        <input type="submit" name="buttonRegister">
      </form>
    </div>

    <!--- HELP --->
    <div id="Help" class="tabpane">
      help
    </div>

  </div>
  <!--- IMPORT JAVA --->
  <script src="java.js"></script>
</body>

</html>

答案 1 :(得分：1)

正如其他人所说，问题在于您在页面加载时只定义一次visibilityToggle，因此只有第一个图标会附加一个事件侦听器。

您必须将事件侦听器附加到所有这些，如下所示：

// START JAVA FOR PWD TOGGLE
let visibilityToggles = document.querySelectorAll('.visibility');
    
for (const toggle of visibilityToggles) {
        
    const input = toggle.previousElementSibling;
    var password = true;
    
    toggle.addEventListener('click', function() {
        if (password) {
            input.setAttribute('type', 'text');
            toggle.innerHTML = 'visibility';
        } else {
            input.setAttribute('type', 'password');
            toggle.innerHTML = 'visibility_off';
        }
        password = !password;
    });
}
相关问题
最新问题