jQueryでパスワードの表示・非表示を切り替えるサンプル
jQueryでフォームのパスワードの表示・非表示を切り替えるサンプルを紹介します。
1.はじめに
フォームのパスワードの表示・非表示を切り替える必要が生じたので、調べてみました。
この記事でサンプルを作ってみましたので、よければご利用ください。
2.サンプル
サンプルページから動作を確認できます。
3.ソース
コピー&ペーストでそのまま使えると思います。
<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の解説です。
4.HTML
HTMLのform要素内にパスワードのフォームと表示・非表示切り替え用のアイコンを表示するspan要素を設定します。
<form>
<input type="password" id="pass" value="">
<span id="eye" class="fa fa-eye-slash"></span>
</form>
5.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%);
}
6.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');
}
});
});
7.アイコン表示
アイコンの表示は「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"はスラッシュなしのアイコンです。
8.スラッシュの有無変更
サンプルは非表示の状態でスラッシュありのアイコンを表示(=現在の状態を表示)していますが、スラッシュの有無を逆にしたい場合は、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');
mysqlやmysqldumpで「 [Warning] Using a password on the command line interface can be insecure.」という警告が表示される場合の対処
mysqlやmysqldumpで「 [Warning] Using a password on the command line interface can be insecure.」という警告が表示される場合の対処について紹介します。
1.問題点
さくらインターネットで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.」という警告が表示される場合の対処について紹介します。
2.原因
原因は、パスワードを入れてmysqlコマンドやmysqldumpを実行すると、この警告が表示されるようです。
3.対処方法
ここではパスワードを別ファイルにしてコマンドラインにパスワードを入力しない方法を紹介します。
まず、下記の内容を、任意のディレクトリ・任意のファイル名で作成します。ここでは"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'
私はこれでひっかかって随分悩みました(笑)。
Windows11でウィンドウの影を消す方法
Windows11でウィンドウの影を消す方法を紹介します。
1.問題点
Windows11ではエクスプローラーなど、ウィンドウにデフォルトで影がついています。
この影を消したいのですが、方法が分かりません。
ということで、Windows11でウィンドウの影を消す方法を紹介します。
2.Windows11でウィンドウの影を消す
ウィンドウの影を消すには、「スタート」→「設定」をクリック。
「システム」→「バージョン情報」をクリック。
「システムの詳細設定」をクリック。
「パフォーマンス」の「設定」をクリック。
「ウィンドウの下に影を表示する」のチェックを外して「OK」をクリック。
これでウィンドウの影が消えました。