jQueryでパスワードの表示・非表示を切り替えるサンプル

April 18,2023 11:55 PM
Category：[jQuery]
Tag：[jQuery]
Permalink

jQueryでフォームのパスワードの表示・非表示を切り替えるサンプルを紹介します。

jQueryでフォームのパスワードの表示・非表示を切り替えるサンプル（非表示）
jQueryでフォームのパスワードの表示・非表示を切り替えるサンプル（表示）

１．はじめに

フォームのパスワードの表示・非表示を切り替える必要が生じたので、調べてみました。

この記事でサンプルを作ってみましたので、よければご利用ください。

２．サンプル

サンプルページから動作を確認できます。

３．ソース

コピー＆ペーストでそのまま使えると思います。

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <style>
    form {
        font-size: 20px;
        width: 300px;
        position: relative;
    }
    #pass {
        font-size: 20px;
        width: 100%;
        padding: 5px;
    }
    #eye {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
    }
    </style>
    <script>
    $(function(){
        $('#eye').on('click', function() {
            var pass = $("#pass").attr('type');
            if (pass === "text") {
                $("#pass").attr('type', 'password');
                $("#eye").removeClass("fa-eye").addClass('fa-eye-slash');
            } else {
                $("#pass").attr('type', 'text');
                $("#eye").removeClass("fa-eye-slash").addClass('fa-eye');
            }
        });
    });
    </script>
  </head>
  <body>
    <form>
      <input type="password" id="pass" value="">
      <span id="eye" class="fa fa-eye-slash"></span>
    </form>
  </body>
</html>

以下、HTML、CSS、jQueryの解説です。

４．HTML

HTMLのform要素内にパスワードのフォームと表示・非表示切り替え用のアイコンを表示するspan要素を設定します。

<form>
  <input type="password" id="pass" value="">
  <span id="eye" class="fa fa-eye-slash"></span>
</form>

５．CSS

CSSは、パスワードのサイズと、非表示切り替え用のアイコンの配置に用いています。

formにwidthプロパティとpositionプロパティで"relative"を設定します。

#pass（パスワードフォーム）に、フォームの横幅を設定します（これを設定しないとデフォルトサイズになります）。

#eye（非表示切り替え用のアイコン）のpositionプロパティで"absolute"を設定して、top、rifht、transformで位置を調整します。

form {
    font-size: 20px;
    width: 300px;
    position: relative;
}
#pass {
    font-size: 20px;
    width: 100%;
    padding: 5px;
}
#eye {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

６．jQuery

#eyeにon(click)イベントを設定し、クリックされるとパスワードのtype属性を取得し、type属性が"text"の場合は値を"password"に変更し、アイコンを切り替えます。

type属性がpasswordの場合は値を"text"に変更し、アイコンを切り替えます。

$(function(){
    $('#eye').on('click', function() {
        var pass = $("#pass").attr('type');
        if (pass === "text") {
            $("#pass").attr('type', 'password');
            $("#eye").removeClass("fa-eye").addClass('fa-eye-slash');
        } else {
            $("#pass").attr('type', 'text');
            $("#eye").removeClass("fa-eye-slash").addClass('fa-eye');
        }
    });
});

７．アイコン表示

アイコンの表示は「Font Awesome」を利用して、下記の設定だけでアイコンが表示される仕組みになっています。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
　：
<span id="eye" class="fa fa-eye-slash"></span>

"fa-eye-slash"はスラッシュつきのアイコン、 "fa-eye"はスラッシュなしのアイコンです。

８．スラッシュの有無変更

サンプルは非表示の状態でスラッシュありのアイコンを表示（＝現在の状態を表示）していますが、スラッシュの有無を逆にしたい場合は、HTMLおよびjQueryを下記の赤字にそれぞれ書き換えてください。

<span id="eye" class="fa fa-eye"></span>
if (pass === "text") {
    $("#pass").attr('type', 'password');
    $("#eye").removeClass("fa-eye-slash").addClass('fa-eye');
} else {
    $("#pass").attr('type', 'text');
    $("#eye").removeClass("fa-eye").addClass('fa-eye-slash');
Comments [0] | Trackbacks [0]

mysqlやmysqldumpで「 [Warning] Using a password on the command line interface can be insecure.」という警告が表示される場合の対処

April 4,2023 11:55 PM
Category：[MySQL]
Tag：[MySQL]
Permalink

mysqlやmysqldumpで「 [Warning] Using a password on the command line interface can be insecure.」という警告が表示される場合の対処について紹介します。

１．問題点

さくらインターネットでMySQLのバックアップを取得しようと思い、下記のコマンドを実施しました。

$ mysqldump -h mysqlxxx.db.sakura.ne.jp -u hoge -phuga testdatabase > testdatabase.sql

これまでは実行できていたのですが、今回は下記の警告に遭遇しました。

mysqldump: [Warning] Using a password on the command line interface can be insecure.

警告なのでバックアップは取得できたようですが、警告を解消する方法がわかりません。

ということで、mysqldumpで「 [Warning] Using a password on the command line interface can be insecure.」という警告が表示される場合の対処について紹介します。

２．原因

原因は、パスワードを入れてmysqlコマンドやmysqldumpを実行すると、この警告が表示されるようです。

３．対処方法

ここではパスワードを別ファイルにしてコマンドラインにパスワードを入力しない方法を紹介します。

まず、下記の内容を、任意のディレクトリ・任意のファイル名で作成します。ここでは"test.conf"とします。実際には".test.conf"など、ピリオドつきのファイル名がいいと思います。

[client]
password = ＜パスワード＞

ファイルのパーミッションを変更します（後で実施でもOK）。

$ chmod 400 test.conf

パーミッションのライト権を外しておかないと、コマンド実行時に下記のエラーが発生するケースがあるようです。

Warning: World-writable config file '/home/foo/test.conf' is ignored

ファイルを作成したら、下記のコマンドラインを実行します。これで警告が表示されなくなると思います。

$ mysqldump --defaults-extra-file=test.conf -h mysqlxxx.db.sakura.ne.jp -u hoge -phuga testdatabase > testdatabase.sql

コマンドラインの解説ですが、"--defaults-extra-file"オプションで、作成したファイルを読み込んでいます。

配置したディレクトリ以外でコマンドを実行する場合は、下記のように相対パスまたは絶対パスを指定してください。

$ mysqldump --defaults-extra-file=/home/foo/test.conf -h mysqlxxx.db.sakura.ne.jp -u hoge -phuga testdatabase > testdatabase.sql

なお、"--defaults-extra-file"オプションはコマンドの第1パラメータに必ず指定してください。

第2パラメータ以降で指定すると次のエラーになります。

mysqldump: [ERROR] unknown variable 'defaults-extra-file=test.conf'

私はこれでひっかかって随分悩みました（笑）。

Comments [0] | Trackbacks [0]

Windows11でウィンドウの影を消す方法

March 15,2023 11:55 PM
Category：[Windows]
Tag：[Windows11]
Permalink

Windows11でウィンドウの影を消す方法を紹介します。

１．問題点

Windows11ではエクスプローラーなど、ウィンドウにデフォルトで影がついています。

（クリックで拡大、以下同様）
Windows11のウィンドウの影あり

この影を消したいのですが、方法が分かりません。

ということで、Windows11でウィンドウの影を消す方法を紹介します。

２．Windows11でウィンドウの影を消す

ウィンドウの影を消すには、「スタート」→「設定」をクリック。

「スタート」→「設定」

「システム」→「バージョン情報」をクリック。

システム

「システムの詳細設定」をクリック。

バージョン情報

「パフォーマンス」の「設定」をクリック。

システムの詳細設定

「ウィンドウの下に影を表示する」のチェックを外して「OK」をクリック。

詳細設定

これでウィンドウの影が消えました。

Windows11のウィンドウの影なし

Comments [0] | Trackbacks [0]
 1  |  2  |  3  |  4  |  5  | All pages ＞