jQuery と JavaScript を使用してパスワードを表示および非表示にする方法

次の記事ではjQueryとJavaScriptを使ってパスワードを表示・非表示にする方法を紹介しますので、ご参考になれば幸いです。

アカウントのセキュリティのため、パスワードを入力するときは常に非常に複雑なパスワードを設定します。パスワードは表示されないため、入力が正しいかどうかはわかりません。正しいか間違っているかにかかわらず、認証エラーが発生する可能性があります。その結果、Web サイトではユーザーがパスワード フィールドの隠しテキストの表示を切り替えられるようになりました。

次のコード例では、jQuery と JavaScript を使用してパスワードを表示および非表示にする方法を紹介します。 [関連ビデオチュートリアルの推奨事項: JavaScript チュートリアル 、jQuery チュートリアル ]

HTML コード: まず、基本的なフォーム レイアウトを作成する必要があります

<table>
 <tr>
  <td>Username : </td>
  <td><input type=&#39;text&#39; id=&#39;username&#39; ></td>
 </tr>
 <tr>
  <td>Password : </td>
  <td><input type=&#39;password&#39; id=&#39;password&#39; > 
     <input type=&#39;checkbox&#39; id=&#39;toggle&#39; value=&#39;0&#39; onchange=&#39;togglePassword(this);&#39;>  <span id=&#39;toggleText&#39;>Show</span></td>
 </tr>
 <tr>
  <td> </td>
  <td><input type=&#39;button&#39; id=&#39;but_reg&#39; value=&#39;Sign Up&#39; ></td>
 </tr>
</table>

手順: onchange="togglePassword()" イベントをチェック ボックス要素にアタッチし、JS コードを呼び出してパスワードの表示 (または非表示) を切り替えます。

1 を使用します。実装するJavaScript

<script type="text/javascript">
 
 function togglePassword(el){
 
  // Checked State
  var checked = el.checked;
  if(checked){
   // Changing type attribute
   document.getElementById("password").type = &#39;text&#39;;
   // Change the Text
   document.getElementById("toggleText").textContent= "Hide";
  }else{
   // Changing type attribute
   document.getElementById("password").type = &#39;password&#39;;
   // Change the Text
   document.getElementById("toggleText").textContent= "Show";
  }
 }
 
</script>

説明:

チェックボックスがチェックされているかどうかを確認します。チェックされていない場合は、入力ボックスの type 属性がテキストに切り替わります。 、type 属性はパスワードのままです。

レンダリング:

2. jQuery を使用して実装します

jQuery ライブラリをインポートします

<script type="text/javascript" src="jquery.min.js" ></script>

jQuery の attr() メソッドを使用して、input 要素の type 属性を変更します。

<script type="text/javascript">
 
$(document).ready(function(){
 $("#toggle").change(function(){
  
  // Check the checkbox state
  if($(this).is(&#39;:checked&#39;)){
   // Changing type attribute
   $("#password").attr("type","text");
   
   // Change the Text
   $("#toggleText").text("隐藏密码");
  }else{
   // Changing type attribute
   $("#password").attr("type","password");
  
   // Change the Text
   $("#toggleText").text("显示密码");
  }
 
 });
});
 
</script>

出力:

上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ！ ！

以上がjQuery と JavaScript を使用してパスワードを表示および非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。