JavaScriptでinputのパスワードの黒丸のところを文字で表示させてみた！！ #JavaScript

はじめに

某プログラミングスクールで、メ○○リのコピーサイトを作成しました。
チームメンバーが実装していた、ボタンを押すとパスワードの黒丸を文字として表示させる
実装を今日はやっていきたいと思います！と思ったのですが、
すでに下記の参考記事で簡単に作成できました。
パスワード表示時にマスキング有無を選択できるようにする方法

なので、自分のメモ用で記載していきます。
ちなみにこんな感じのものを実装していきます。

解説

1.まずパスワードを文字として表示していきます。

　(1)hamlを記載していきます。(一部のみ表示しています。)

password.html.haml

= form_for @resume do |f|
  = f.password_field :password,placeholder: '検索時に使用するパスワードを入力',class:"content_main9__form9--password",id:'password'
  %input#js-passcheck{type: "checkbox"}
  %label{for: "js-passcheck"} パスワードを表示する

コードはこんな感じです。

　(2)jsを記載していきます。

password.js

$(function(){
  var password = '#password'; #haml内のid:'password'を取得して代入。
  var passcheck = '#js-passcheck'; #haml内のid:'js-passcheck'を取得して代入。

  $(passcheck).change(function(){  #チェックボックスを押した際に発火するイベントを作成
    if ($(this).prop('checked')){   #チェックボックスにチェックが入った場合発火
      $(password).attr('type','text');  #パスワードのタイプをtypeからtextへ変更することで文字表示
    }
  });
});

チェックボックスを押した際に発火するイベントを作成しています。
そして、チェックボックスにチェックが入った時に、
input内のtypeをpasswordからtextへと変更する形となっています。
なので、input内の文字が表示されるようです。

2.パスワードを黒丸に戻します。

password.js

$(function(){
  var password = '#password'; #haml内のid:'password'を取得して代入。
  var passcheck = '#js-passcheck'; #haml内のid:'js-passcheck'を取得して代入。

  $(passcheck).change(function(){  #チェックボックスを押した際に発火するイベントを作成
    if ($(this).prop('checked')){   #チェックボックスにチェックが入った場合発火
      $(password).attr('type','text');  #パスワードのタイプをtypeからtextへ変更することで文字表示
    } else {                            #チェックボックスからチェックがなくなった際に発火
      $(password).attr('type','password');  #パスワードのタイプをpasswordへと変更
    }
  });
});

次に、elseの部分では、チェックボックスからチェックがなくなった時のイベントとなっています。
この文で、inputのtypeをtextからpasswordへと変更しているため、
文字が再び黒丸へと戻るようです。

まとめ

もし間違えている理解が間違っている部分等が、ありましたらコメントをいただけると幸いです。