时间戳

首页 > 解决方案 > 显示/隐藏密码与我的 css 代码混淆

javascript - 显示/隐藏密码与我的 css 代码混淆

问题描述

显示/隐藏功能运行良好，但它弄乱了我的 CSS 文件，因为它与 CSS 文件中添加的样式不一致。这是我的文件的代码。

<div class="div-pwd">
    <label for="password" class="pwd">Password: </label>
        <input type="password" placeholder="Password" name="password" id="pwd" required>
 </div>
     <input type="checkbox" onclick="showPassword(this);">
         <label class="showpwd">Show Password</label>
         <button type="submit" name="login_user" >Login</button>

对于 JavaScript，我有：

function showPassword(check_box) { 
      var temp = document.getElementById("pwd"); 
      if (check_box.checked) { 
        temp.setAttribute("type","text") ;
      } 
      else {
        temp.setAttribute("type","password");
      } 
    }

每次勾选复选框时，即使 CSS 文件另有说明，密码输入类型的位置也会向左上方移动。

对于 JS 部分，我使用本教程作为链接。

标签： javascripthtmlcss

解决方案

您的 CSS 专门针对密码字段。

.div-pwd input[type="password"]

当它不再是密码字段时，它就会失去其 CSS 规则。

给它一个 ID 或一个类，然后用你的 CSS 规则来定位它。

推荐阅读