autocompleteと戦ってみた時の話

input type="password"のあるFormをsubmitすると出てくる「パスワードを保存しますか？」的なアレ。
いつもお世話になっているけれど、パスワードの変更画面等、いらない時にも出てくるのは困りもの。

IEやEdgeだと下にちょろっと出てくるだけなのであまり気にならないけれど、ChromeやFireFoxだと結構目立つダイアログが出てくるんで、いらない時は正直うざい。

という訳で戦ってみた。

対象ブラウザ:IE11,Edge,Chrome(68),FireFox(62)

#1.autocomplete="hoge"
https://developer.mozilla.org/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
を参考に、passwordにautocomple属性をつけてみた。

<input type="text" name="id" />
<input type="password" name="password" autocomple="xxx" />

こんな感じ。

結果:NG
全ての対象ブラウザで当然のようにパスワードの保存を尋ねてくる始末。こりゃダメだ、次。

#2.ダミーの<input type="password">を配置する
https://qiita.com/saitoxu/items/f565172da3028c1544f7
に記載の方法。これはちょっと期待できるかも？

結果:IE11,EdgeのみOK
IEとEdgeで上手くいったので「お？」と思ったが、FireFoxでは普通にパスワードの保存を聞いてきた。Chromeも現在のバージョンだとダメな感じ。

#3.onkeyupでhiddenに移し、●で置換する

type="password"を使わず、type="text"でkeyupイベントを拾って何とかしてみようとした。
うろ覚えな上に失敗なのでコードは雰囲気で。

html

<input type="text" name="id" />
<input id="disp" type="text" name="passwordDisp" style="ime-mode:disabled" onpaste="return false" />
<input id="password" type="hidden" name="password" />

javascript

$(window).load(function(){
  $("#disp").keyup(changePassword());
})
function changePassword(){
  // ここで$("#disp").val()を一文字づつ調べ、●でなければ$("#password")に移し、
  // dispの方は●に置換する
}

結果:NG
半角限定だし貼り付けも抑止したから本当に●が入ってくることもないし、これなら大丈夫、と思ったけれど、大きな誤算。
"ime-mode:disabled"ってブラウザによっては効かないのね。
しかもWindows10の予測変換をクリックで決定すると、何のイベントも起こさず文字が挿入されるし。

#4.入力の時だけpasswordにする
JQueryでinputのtype属性を弄り、フォーカスイン時にpasswordにしてフォーカスアウト時にはtextにしてしまう方法。

html

<input type="text" name="id" />
<input id="disp" type="text" name="passwordDisp" styleClass="inputPassword" />
<input id="password" type="hidden" name="password" />

css

/* chromeでの見た目をpasswordっぽくする */
.inputPassword{
  -webkit-text-security: disc;
}

javascript

$(window).load(function(){
  $("#disp").focus(function(){
    $("#disp")[0].type = "password";
    // hiddenの値をpasswordに移動
    $("#disp").val($("#password").val());
    focus = true;
  });

  $("#disp").blur(function(){
    // passwordの値をhiddenに移動
    $("#password").val($("#disp").val());
    // passwordの値を●に置換
    var mask = "";
    for(var i=0; i<$("#disp").val().length; i++){
      mask += "●";
    }
    $("#disp")[0].type = "text";
    $("#disp").val(mask);
    focus = false;
  });

  // リンクでsubmitした時にblurイベントが発生しなかったので一応
  $("form").submit(function(){
    if(focus){
      $("#disp").blur();
    }
  });
})

結果:OK
やっと全ての対象ブラウザを騙すことができた。

IEだとフォーカスインした時にキャレット位置が勝手に最初に移ってしまうので、その辺を調整すれば完成。

パスワードを保存させたいっていうブラウザ開発者の意志は分かるけど、今回問題になったパスワード変更画面とかどう考えてるんだろうね。