登録フォームで目のアイコンのあるフォームを見かける。
クリックすると入力したパスワードの平文が確認でき、打ち間違いを防止出来るため便利ですね。
それをCSSとjQueryで作成しました。

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

まずは作ったフォームを確認してみてください。
パスワードのフォームのアイコンを押すと合わせて表示・非表示を切り替えます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/images/posts/125/toggle-eye.js"></script>

<div class="pw-form">
    <form  class="pw-form-container">
        <p><input type="email" placeholder="Email"></p>
        <p>
          <input type="password" placeholder="Password"  value="no_bug_no_job">
          <span class="field-icon">
            <i toggle="#password-field" class="mdi mdi-eye toggle-password"></i>
          </span>
        </p>
        <p>
            <input type="submit" value="submit" onsubmit="return false;" disabled="disabled">
        </p>
    </form>
</div>

CSSは`F12`で検証してください。
Macは`⌘`+`option`+`i`（[【Mac】ChromeのデベロッパーツールをF12で開くよう設定する方法](https://www.suzu6.net/posts/1/)）。

※ Emailのフォームは飾りです。ボタンはパスワードをどこへも送りません。

<style>

.pw-form {
    width : 80%;
    min-width : 300px;
    max-width : 500px;
    margin : auto;
    background-color : #fafafa;
    padding : 10px;
}
.pw-form-header,
.pw-form p {
  margin-top: 0;
  margin-bottom: 0;
}

.pw-form-header {
  background: #28d;
  padding: 20px;
  font-size: 1.4em;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}

.pw-form-container {
  background: #ebebeb;
  padding: 12px;
}

/* Every row inside .pw-form-container is defined with p tags */
.pw-form p {
  padding: 12px;
}

.pw-form input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  border-width: 1px;
  border-style: solid;
  padding: 16px;
  outline: 0;
  font-family: inherit;
  font-size: 0.95em;
}

.pw-form input[type="email"],
.pw-form input[type="text"],
.pw-form input[type="password"] {
  background: #fff;
  border-color: #bbb;
  color: #555;
}

/* Text fields' focus effect */
.pw-form input[type="email"]:focus,
.pw-form input[type="text"]:focus,
.pw-form input[type="password"]:focus {
  border-color: #888;
}

.pw-form input[type="submit"] {
  background: #28d;
  border-color: transparent;
  color: #fff;
  cursor: pointer;
}

.pw-form input[type="submit"]:hover {
  background: #17c;
}

/* Buttons' focus effect */
.pw-form input[type="submit"]:focus {
  border-color: #05a;
}

.field-icon {
  color: #555;
  float: right;
  margin-right: 15px;
  margin-top: -40px;
  position: relative;
  z-index: 2;
}
</style>

## 利用したライブラリ

- jquery 3.3.1
- materialdesignicons.css 3.5.95

アイコンのフォントに[Material Design Icons](https://materialdesignicons.com/)を使いました。
[Font Awesome](https://fontawesome.com/)などアイコンのフォントを使っても大丈夫です。


## コードの解説

### パスワードの表示・非表示

パスワードの表示・非表示の切り替えは`type`を変更します。

<div class="pw-form">
    <form  class="pw-form-container">
        <p>
          <label>type=text</label>
          <input type="text" placeholder="text" value="type=text">
        </p>
        <p>
          <label>type=password</label>
          <input type="password" placeholder="password" value="type=password">
        </p>
    </form>
</div>

```html

<input type="password">


<input type="text">
```

### 目のアイコンとの連動

目のアイコン<i class="mdi mdi-eye"></i>のクリックを検知して`type`を変更します。
一緒に目を閉じたアイコン<i class="mdi mdi-eye-off"></i>にも変更します。

**HTML**
```html
<form>
    <input type="password" placeholder="Password">
    <span class="field-icon">
        <i toggle="password-field" class="mdi mdi-eye toggle-password"></i>
    </span>
</form>  
```

**javascript**
```js
// パスワードの表示・非表示切替
$(".toggle-password").click(function () {
    // iconの切り替え
    $(this).toggleClass("mdi-eye mdi-eye-off");

    // 入力フォームの取得
    let input = $(this).parent().prev("input");
    // type切替
    if (input.attr("type") == "password") {
        input.attr("type", "text");
    } else {
        input.attr("type", "password");
    }
});
```


<div class="pw-form">
    <form class="pw-form-container">
      <p>
        <input type="password" placeholder="Password" value="VivaLaVida">
        <span class="field-icon">
            <i toggle="password-field" class="mdi mdi-eye toggle-password"></i>
        </span>
      </p>
    </form>
</div>

アイコンをクリックしたとき、アイコンのクラスと`<input>`のtypeを変更します。

`toggleClass("mdi-eye mdi-eye-off")`は実行のたびに、クラスを与えたり消したりを繰り返す。
初めから`mdi-eye`のクラスはあるので、最初のトグルでは`mdi-eye`が消え`mdi-eye-off`が付く。
次はその反対。。。と繰り返す。


$(this).parent().prev("input");`は親要素の隣接する`<input>`タグを取りに行っています。
その後、typeを確認して切り替えている。

### ソースコードの全文

長いのでPlayCodeというサービスに置きました。

[PlayCode](https://playcode.io/276568?tabs=console&script.js&output)

## 参考

パスワードの入力フォームを作るうえで参考になりそう。

- [言語別：パスワード向けの正規表現](https://qiita.com/mpyw/items/886218e7b418dfed254b)

- [登録フォームにおけるパスワード確認用の入力欄は必要か](https://uxmilk.jp/18568)

「ある調査によると、登録フォームを離脱した全ての人のうち、４分の１以上が、パスワード確認が原因で離脱しています。」
パスワード確認を廃止し、パスワードの表示切替を導入したほうが良い。
間違ったパスワードは再発行してもらうことで解決するのでは。

- [maxlengthを使ってはいけない。特にパスワード入力欄で使っちゃ駄目！](https://qiita.com/kawaz/items/d462a05c113b8e063736#comment-31858b02023fac3424de)

maxlength=20の欄にユーザが30文字のパスワードを張り付けたとき、20文字で切られる。
プログラム側もそれを知るすべがない。
今後、推奨の文字数が増えることもあるためmaxlengthを使って上限は設けないほうがよさそう。

パスワードの表示/非表示を切り替えるフォームのCSSとjQuery


PHPでクエリパラメータ付きのURLを確認していると、`&currency`の部分が`¤cy`となって表示された。
初めて見る特殊文字だったので共有します。

## 意味

**currency**：通貨、 流通貨幣（Weblioより）
**¤**：国際通貨記号（Wikiより）

## 現象

下のようにクエリパラメータの`currecy`に通貨の情報を渡したURLを`echo`して表示したら現れた。

```php
echo 'http://{domain}/api?price=100&currency=JPY';
// 出力
// http://{domain}/api?price=100¤cy=JPY
```

http://{domain}/api?price=100&currency=JPY

HTMLに直接書くと現れない。

同様の質問がStack Overflowでも２件ありました。

[PHP "&curren" string turns into weird symbol - Stack Overflow](https://stackoverflow.com/questions/41335786/php-curren-string-turns-into-weird-symbol)

### 環境

- PHP7.x
- HTML5
- Chrome

## 文字参照

`&curren;`がHTMLの[文字参照](https://ja.wikipedia.org/wiki/%E6%96%87%E5%AD%97%E5%8F%82%E7%85%A7)に割り当てられているみたいです。
セミコロンなしでも変換するようです。

おなじみの空白記号の`&nbsp;`などもこれに当たります。

クエリパラメータとして使いそうな文字をいくつか抜粋する。

|記号|文字実体参照|説明|
|:---:|:---:|:---:|
|&copy;|`&copy;`|著作権記号|
|&deg;|`&deg;`|度記号|
|&micro;|`&micro;`|ミクロン記号|
|&not;|`&not;`|否定記号|
|&reg;|`&reg;`|登録商標|
|&times;|`&times;`|乗算記号|

試しに盛り盛りのクエリパラメータを表示してみる。

```php
echo `https://test.com/api?query=1&copy=12&degree=45&microsoft=true&note=text&regular=満タン&timespan=100`;
```

出力：https://test.com/api?query=1©=12°ree=45µsoft=true¬e=text®ular=満タン×pan=100

おー！たくさん出た！

## 結論

実害は少ないと思いますが、文字参照にも気をつかったほうが良さそうです。


パスワードの表示/非表示を切り替えるフォームのCSSとjQuery

クエリパラメータが文字参照として表示される｜PHP