input type="text" でパスワードtype="password"を実装したい

Question

前提・実現したいこと

複数のパスワード入力フォームがあり、事あるごとに、ブラウザーで自動でパスワードを保存されるため。
<input type="password"ではなく、"text"で代替したいという案がでています。
textで、入力した文字をマスクする方法にはどういった方法がありますか？

該当のソースコード

<input type="password" ...>

上を下記のように変更

<input type="text" ...>

input:focus::placeholder
{
    color: transparent;
}

@font-face {
    font-family: 'password';
    src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf);
    letter-spacing: 2px;
  }

ソースコード

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。上記の方法だと、日本語を入力した際に、パスワードが表示されてしまいます。

TypeScriptで開発しています。アドバイス等いただければ助かります。

Comments

[退会済みユーザー]

同じような質問が解決しております。こちらは試しましたか？https://teratail.com/questions/55355

[Kentarito]

ありがとうございます。試しました。残念ながら解決しませんでした。課題としては同じ質問ですね。現状としては、onInputで入力を検知して、入力値を表示せずにかわりに、●記号を表示させれないか探しています。

Answer 1

目的は記憶させない事であるならタグに autocomplete="off" を追加してはどうでしょうか

https://developer.mozilla.org/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

Comments

[think49]

https://caniuse.com/#feat=input-autocomplete-onoff
IE, Edge, Safariは未対応かも…。

[Kentarito]

offだけでなく、new-passwordも試してみましたが、どうしてもパスワード保存しますか？と聞かれてしまいます。

Answer 2

<form action="selfsubmit.php" method="post">
    User to search for:
    <input type="text" id="username">
    <br />(other selections that make up an override)
    <br />Password:
    <input type="text" id="password">
    <br />
    <button type="submit" name="submit" value="submit">Create override</button>
</form>

    var process = function (that) {
        document.getElementById("password").setAttribute("type", "password");
    }
    if ('oninput' in document.createElement('input')) {
        $("#password").bind("input", function () {
            process(this)
        })
    } else {
        $("#password").bind("keyup", function () {
            process(this)
        })
    }

https://stackoverflow.com/questions/22457344/masking-input-characters-without-type-password

http://jsfiddle.net/hsMd6/6/

Comments

[fa11enprince]

これくらいしかやりようがない気がしています…。なぜ低評価付けられているんだろう…TypeScriptで書いてないからとか？？ですかね。でもTypeScriptでもJavaScriptは通用するのでこれでいいと思いますが…。「ブラウザーで自動でパスワードを保存されるため」ダメ！っていう人を説得するのがたぶんベストアンサーなんでしょうけど、現実いろいろありそうとか思ってみたりしてます。

[mosapride]

低評価は日本語の説明が無かったからですかね。
mozillaの公式を読む限り現状ではブラウザパスワードを100％OFFにすることは不可能と解釈です。保存はブラウザの機能であり、オートコンプリート(保存)禁止をすべてのブラウザではできない。どうしてもやりたい場合はtextで置き換えるしかない。もしくはjqueryなどのライブラリを使用するようですね。
ライブラリ→https://github.com/terrylinooo/jquery.disableAutoFill

HTMLで100%制御ができるなら公式でライブラリ紹介とかしないでしょうし。

Answer 3

古い質問ですが、今後閲覧される人へのメッセージとして残しておきます。

iPhone及びiPadにおいて、Password入力欄が存在するページにアクセスすると、「***にログインしますか」という表示と共に指紋認証され、挙げ句にはEmail欄などにオートフォーカスまでされるフザけた仕様になっていました。

iOS及びiPadOSの13～13.5の何処かで仕様が変わったのだと思われますが、サイトの構成によってはかなり鬱陶しい仕様になります。（iPadのUserAgentにiPadの表記を抹消したり、Appleのこういう傍若無人な振る舞いがたまに癇に障ります）

とまぁ、腹立たしい感情を顕にしてしまいましたが、ここの回答にあるKei344さんのダミーPassword欄を作る方法で一応は解決しました。(正直、プログラマー的にこの不格好な対応はかなり気が引けますが…。Appleのせいだと割り切ります。)

要約すると、Password入力欄が2つ以上ある事で「ログインしますか？」や指紋認証、オートフォーカスは全て回避できます。ページ構成など他にも回避できる条件はあるっぽいですが、よく分からんのでPassword欄を2つ作るのが手っ取り早いです。cssでwidth:2px;height:2px;opacity:.01;を指定したPassword欄をダミーで作るだけで解決します。

この方法、僅かにデメリットがありまして、タップやマウスで入力欄を選ぶ分には縦横2pxで透過処理したダミー入力欄は何ら邪魔にならないのですが、キーボードの「tab」的な行為を行うとダミーにフォーカスがいってしまいます。まぁ、submitボタンの後ろにでもダミーを設置しておけば影響はほぼ皆無に等しいと言えます。

余談ですが、kentaritoさんが最終的に行き着いた解決法は、type=textに伏せ字用のWebフォントを採用して擬似的にtype=passwordのように****表示にする形ですが…。正直、入力欄にWebフォントを使用するのはあまりお勧めできないです。現状としては、入力欄のWebフォント指定は推薦された方法では無いので仕様が変わる可能性が高いです。デバイスによっては結構崩れますし、荒技の類です。

Answer 4

アイデアだけ。

パスワードが保存されるのは「submitされる時」なので、submit直前に <input type="password"> を <input type="hidden"> に書き換えてはどうか、と思いました。
(submit後に [戻る] した時の挙動まで考慮すると、少々面倒ではありますが)

Re: Kentarito さん

Comments

[Kentarito]

ありがとうございます。結局入力を変更する方法にしました。

Answer 5

ダミーのフィールドを置く方法はすでに試されていますか？

【Safariのオートコンプリートの不思議な挙動】
https://qiita.com/ymrl/items/bd24b9850a5a403b4c0d

【autocompleteをめぐるChromeとの仁義なき戦い】
https://qiita.com/saitoxu/items/f565172da3028c1544f7

Answer 6

回答として期待外れなこととなることを前提で。

そういうことをしているwebアプリをメンテしていましたが、表示上マスクしていてもコピーで抜き出せるとか、そもそも一般のフォームとして値が覚えられるとかで、使いものになりませんでした(もともと全体の作りがおそまつではありましたが)。

Comments

[Kentarito]

なるほど。ありがとうございます。

Answer 7

みなさん、こんにちは！回答ありがとうございました。結局下記の方法で解決しました。Agnularで開発をしているとコメントしていなかったので、少し納得のいかない方もいるかもしれませんが。データ保存用のモデルと、表示用のValueに分かれています。そのほかにもonBlurや、更新のタイミングで表示を変更しました。

Template
<input [(ngModel)="value"] (input)="onInput()">

onInput(): void
{
    this.model.setValue(this.value);
}

set model(value: T)
{
   this._model = value;
   this.updateLocalValue();
}

private updateLocalValue(): void
{
    this.value = '';
    for (let i = 0; i < this.model.getValue().length; i++)
    {
        this.value += '•';
    }
}

Comments

[Kentarito]

実は、解決していませんでした。上記の方法で値を変更すると下記のリンクにあるように、どうしてもカーソルが最後の文字の後にいってしまいます。
https://stackoverflow.com/questions/14508707/updating-an-inputs-value-without-losing-cursor-position

chromeでは、setTimeOutで待つことで、解決できましたがその他のブラウザではうまくいきませんでした。結局ほかの方のコメントにあるように、安全ではないかもしれませんが、下記のリンクの方法を使いました。

https://www.programmergate.com/disable-save-password-prompt-on-login-forms-using-css/