質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

7回答

5744閲覧

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

Kentarito

総合スコア6

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

1グッド

1クリップ

投稿2018/08/02 08:05

編集2018/08/02 10:13

前提・実現したいこと

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

該当のソースコード

password.component.html

1 2<input type="password" ...> 3 4上を下記のように変更 5 6<input type="text" ...> 7 8input:focus::placeholder 9{ 10 color: transparent; 11} 12 13@font-face { 14 font-family: 'password'; 15 src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf); 16 letter-spacing: 2px; 17 } 18 19ソースコード

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

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

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

x_x👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Kentarito

2018/08/03 08:37

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

回答7

0

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

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

投稿2018/08/02 08:52

namda

総合スコア705

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Kentarito

2018/08/05 16:24

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

0

html

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

js

1 var process = function (that) { 2 document.getElementById("password").setAttribute("type", "password"); 3 } 4 if ('oninput' in document.createElement('input')) { 5 $("#password").bind("input", function () { 6 process(this) 7 }) 8 } else { 9 $("#password").bind("keyup", function () { 10 process(this) 11 }) 12 }

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

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

投稿2018/08/04 21:03

mosapride

総合スコア1480

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fa11enprince

2018/08/05 16:49

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

2018/08/06 01:28

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

0

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

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フォント指定は推薦された方法では無いので仕様が変わる可能性が高いです。デバイスによっては結構崩れますし、荒技の類です。

投稿2020/05/28 23:43

編集2020/05/28 23:59
harutann

総合スコア4

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

アイデアだけ。

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

Re: Kentarito さん

投稿2018/08/06 04:25

編集2018/08/07 11:00
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Kentarito

2018/08/07 11:03

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

0

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

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

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

投稿2018/08/05 17:37

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

投稿2018/08/02 08:33

papinianus

総合スコア12705

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Kentarito

2018/08/03 08:36

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

0

自己解決

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

Typescript

1Template 2<input [(ngModel)="value"] (input)="onInput()"> 3 4onInput(): void 5{ 6 this.model.setValue(this.value); 7} 8 9set model(value: T) 10{ 11 this._model = value; 12 this.updateLocalValue(); 13} 14 15private updateLocalValue(): void 16{ 17 this.value = ''; 18 for (let i = 0; i < this.model.getValue().length; i++) 19 { 20 this.value += '•'; 21 } 22} 23

投稿2018/08/07 11:23

Kentarito

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Kentarito

2018/08/09 09:41

実は、解決していませんでした。上記の方法で値を変更すると下記のリンクにあるように、どうしてもカーソルが最後の文字の後にいってしまいます。 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/
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問