パスワードの表示/非表示を切り替える

環境

• Rails5.2
• Slim
• JavaScript

はじめに

パスワードを入力をする際、セキュリティのため、入力した文字が「・・・」で表示されます。それを、チェックボックスを使って、入力文字が表示できるよう、切り替えられるようにします。どのようにするのかといえば、HTMLのinputタグのtype属性を、passwordからtextに変更するだけです。これだけで、入力文字が表示されるようになります。非表示にしたい場合は、input属性を逆に、textからpasswordに戻せばいいだけの話です。フロントエンド側の操作になるため、JavaScriptを使って実現させることになります。

動き

チェックを外すと、パスワードが非表示になります。

チェックをつけると、パスワードが表示されます。

内容

パスワードを入力するform-group内に、パスワード表示のチェックボックスを追加します。サーバーサイドのRailsに直接送信させる項目ではないため、独立させた項目として記述します。slimを使っている中に、HTMLを直接埋め込んでも動作します。

_form.html.slim

.form-group
    .row
        .col-md-2
            = f.label :password, 'パスワード', class: 'form-label'
        .col-md-4
            = f.password_field :password, class: 'form-control', id: 'usr_password'
            <input type = 'checkbox' id = 'users_passcheck' class = 'form-check-input'> パスワード表示

slimで記述すれば、次のようになります。

_form.html.slim

input#users_passcheck.form-check-input type = 'checkbox' パスワード表示

JavaScriptのコードを記述します。最初に、ファイルの拡張子がデフォルトではcoffeeになっているため、jsに変更します。

チェックボックスにチェックをオン/オフしたときに発火するイベントはchangeです。
RailsでTurboLinskを有効にしているため、turbolinks:loadはお約束です。

user.js

document.addEventListener('turbolinks:load', function() {
    document.getElementById('users_passcheck').addEventListener('change', function() {
        let txt_pass = document.getElementById("usr_password");
        if (txt_pass.type === "password"){
            txt_pass.type = "text"
        }else{
            txt_pass.type = "password"
        };
    })
}, false)