JSでログインページのパスワードを表示・非表示にする方法

ログインページでは、テキストボックス内の小さな目のような絵をクリックすることで、パスワードを非表示にしたり表示したりする機能がよく使用されます。 JSをベースにログインページのパスワードを表示・非表示にする方法をご紹介しますので、必要な方は参考にしてみてください

ログインページでは、 をクリックしてパスワードを非表示・表示する機能をよく使います。テキストボックスに小さな目のような絵が表示されます。原理は非常に簡単です。具体的な処理については、クリックイベントを使用してください:

実装コードを共有する前に。あなた、レンダリングをお見せしましょう:

<ul class="form-area">
 <li>
  <p class="item-content">
   <p class="item-input">
    <input type="text" name="accountName" autofocus required="required" placeholder="请输入用户名">
   </p>
  </p>
 </li>
 <li>
  <p class="item-content">
   <p class="item-input">
     <input type="password" name="password" id="password" required="required" placeholder="请输入密码">
   </p>
  </p>
 </li>
 <li>
  <span style="position:absolute;right: 20px;top: -38px">
   <img  id="showText" onclick="hideShowPsw()" alt="JSでログインページのパスワードを表示・非表示にする方法" >
  </span>
 </li>
</ul>

<script type="text/javascript">
//获取input框内的切换图片id和input文本框的id
 var demoImg = document.getElementById("showText");
 var demoInput = document.getElementById("password");
 function hideShowPsw() {
  if (demoInput.type == "password") {
   demoInput.type = "text";
   demoImg.src ="../Images/showPasswd.png";
  } else {
   demoInput.type = "password";
   demoImg.src = "../Images/hidePasswd.png";
  }
 }
</script>

上記は私です。皆さんのためにまとめました。将来皆さんのお役に立てれば幸いです。

関連記事:

Vue プロジェクトを最適化するときに注意すべき点は何ですか?

vuejsのモジュラーアプローチを使用して開発

VUEで配列更新関数を実装する方法

vue-cliを使用してマルチページアプリケーションを実装する方法

以上がJSでログインページのパスワードを表示・非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。