読者です 読者をやめる 読者になる 読者になる

Show Password on MouseOver の使い勝手を良くする

input type="Password" なフィールドを、マウスカーソルを乗せたときだけ type="Text" に変えてくれる (入力したパスワードが見える) Greasemonkeyスクリプトがある。

Source for "Show Password On Mouse Over" - Userscripts.org *1

たまによく使う程度に便利なのだが、 Password <=> Text の切り替え時にキャレットの位置を保持してくれない (フォーカスも外れる) ため、マウスカーソルでキャレット位置を操作できない*2という問題点がある。

そこで、ダブルクリックで表示するようにするとこの問題が解決される。

dblclick 以外何も変わっていないが変更後のコードは以下

window.setTimeout(function() {
  var passFields = document.querySelectorAll("input[type='Password']");
  if (!passFields.length) return;
  for (var i = 0; i < passFields.length; i++) {
    passFields[i].addEventListener("dblclick", function() {
      this.type = "Text";
    }, false);
    passFields[i].addEventListener("mouseout", function() {
      this.type = "Password";
    }, false);
  }
}, 1000)

*1:"オリジナルの作者はわからないの。ごめんぷ!" と書かれているので、リンク先のユーザーアカウントは作者ではない

*2:type="Text" の状態で操作は可能だが、この状態でパスワードを入力するのは IME や補完機能に学習される恐れがあるため極力避けたい