Q&A
みなさん色々ご存じで…本当に勉強になります。
パスワードなのでマルチバイトは検証ではじきますが、かといって入力さえできないようにするというのは悪手ですもんね。
これまたあと一歩というところでしたが、情報感謝いたします。
前提・実現したいこと
ページ毎（URL毎）にパスワードが設定できるサイトを作成しています。
しかしあるページでパスワードを設定すると、Chromeで「パスワードを更新しますか？」のポップアップが邪魔なります。
このポップアップは「サイトのパスワード」であって、「ページ毎のパスワード」ではないためです。
このポップアップを表示させないためには、どうしたらよろしいでしょうか？
発生している問題
ポップアップが邪魔
試したこと
■ページ毎にブラウザのパスワード保存を分ける方法
これがあればベストですが、見つかりませんでした。
■自分で隠す方法１
input type="text"として表示し、自分で隠す方法を試しました。
これならブラウザから「これはパスワードだ」と扱われないようになり、ポップアップは表示されません。
まずHTMLです。
html
1<div class="password_box"> 2 <input type="text" class="inp_password" data-input_type="password"> 3 <button type="button" class="is_view">表示</button> 4 <button type="button" class="">非表示</button> 5</div>
しかし入力値を自分で隠すのが難しいです。
以下ローカルストレージに保存しようとしましたが、タイミングがヘタなのか、全て「※」マークで上書きされてしまいます。なので表示・非表示の切り替えが効きません。
jquery
1$(document).on('input change', '.inp_password', function(){ 2 3 const 4 inp_val = $(this).val(), 5 input_type = $(this).data('input_type'), 6 inp_len = inp_val.length; 7 8 // 隠す 9 if ( input_type === 'password' ) { 10 $(this).val( '*'.repeat(inp_len) ); 11 } 12 13 // 隠したので保持 14 localStorage.setItem( 'inp_password', inp_val ); 15 16}); 17 18$(document).on('click', 'button', function(){ 19 20 $inp = $(this).closest('.password_box').find('input'); 21 22 $(this).toggleClass('is_view'); 23 24 if ( $(this).hasClass('is_view') ) { 25 $inp.data( 'input_type', 'text' ); 26 27 // 保持しておいた値を表示 28 const current_val = localStorage.getItem( 'inp_password' ); 29 $inp.val( current_val ); 30 31 } else { 32 $inp.data( 'input_type', 'password' ); 33 34 // 隠す 35 const inp_len = $inp.val().length; 36 $(this).val( '*'.repeat(inp_len) ); 37 } 38});
■自分で隠す方法２
上記はローカルストレージへの保存のタイミングがうまくいかないため、ローカルストレージをやめて、inputの上にフィルムとしての要素をかぶせる方法を試しました。
しかしそのフィルムがあるせいでinputを操作できなくなり、これも断念しました。
かなり苦労しています。どなたかご回答宜しくお願い致します。
回答5件
0
ChromeとSafari限定ですが、type=text に -webkit-text-security:disc を適用するのはどうでしょうか。
<input type="text" style="-webkit-text-security:disc; input-security:auto" ...
標準化されたプロパティ名は input-security ですが、Chromeは未実装です。
投稿2021/12/13 07:28
総合スコア21695
0
フォントのグリフを●にしてしまうというのはどうでしょうか。
css
1 @font-face { 2 font-family: "dots"; 3 src: url("Password Dots.ttf") format("truetype"); 4 } 5 6 .inp_password { 7 font-family: "dots"; 8 }
上記のフォントだとマルチバイト文字は表示されてしまうのですが……
投稿2021/12/13 01:19
総合スコア36960
だいぶネタ的になってしまいますが、マルチバイト用のドットフォントを自分で作ってしまえば解決しますねー
コレおもしろいですね。
たしかにフォント作れれば解決ですね…
0
諦めるしかないかと思います。
投稿2021/12/12 02:16
総合スコア146018
0
失敗例です。
ページ表示時点、サブミット時点で、type="password"が存在しなければ良いのでは？と思ったのですが、駄目でした。
html
1<!DOCTYPE html> 2<html> 3<head> 4<script> 5function foo(o){ 6 o.value=""; 7 o.type="password"; 8 document.getElementById("pswd").value=""; 9} 10function bar(o){ 11 document.getElementById("pswd").value=o.value; 12 o.value="●".repeat(o.value.length); 13 o.type="text"; 14} 15</script> 16</head> <body> 17 18<form action="foo.cgi"> 19<input name="user" type="text"> 20<input type="text" onFocus="foo(this)" onBlur="bar(this)"> 21<input id="pswd" name="pswd" type="hidden"> 22<input type="submit"> 23</form> 24 25</body></html>
キーイン時点でtype="password"だとダイアログが出るようですね。
投稿2021/12/12 11:04
総合スコア85901
0
思い付きかつ未検証ですが。。。
「自分で隠す方法２」の上下を逆にしてしまってはどうでしょうか？
・背面に入力文字数分の * を表示
・完全透過の<input type="text"を前面に設置
追記
適当に書いてみました。
https://codepen.io/te2ji/pen/bGoBjNO
サンプルなので、完全透過ではなくちょっとだけ残してます。
マルチバイトだとズレるね^^;
フロント得意な人に添削してもらいたいですｗ
投稿2021/12/12 02:30
編集2021/12/13 09:11退会済みユーザー
総合スコア0
ありがとうございます。それだと※の選択ができません。（選択すると後ろにある文字が選択されてしまい、選択した※と文字の位置がずれてしまうんです。）
問題がそれだけなら、なんか解決できそうですね。
適当に書いてみたので、リンクを追記しました。
追記ありがとうございます。その※の選択ができないのはどうしようもなさそうですよね。
普通に選択範囲の先頭と末尾を取得して同期させれば出来そうですけど？
選択範囲の先頭と末尾を取得して同期、ですか？イメージつかないんですが、でも、ひらがなとかですよ？
input や textarea に入力された文字列の選択範囲は取得可能なので、２つの input で同期させればよいという意味です。＊ただ、なぜ選択できないと困るのか理解できませんが^^;
後半は言ってる意味が分かりません。
基本的に入力文字列は基本的にマルチバイトではないんですよね？
なぜひらがなが出てくるのですか？
ひらがなと※は幅が異なるので選択がずれます。選択できないと「マウスで一個前を選択して削除」とかできません。
もちろんマルチバイトではありませんが、マルチバイトも入力できるのが普通のフォームなんです。多くのサービスでそうなっていまして、入力できたうえで「半角英数だけです」とエラーを表示するというのが一般的なフォームなんですよ。
リアルタイムバリデーションで対応するでも、入力値全てマルチバイトに変換して submit 時に ascii 変換するでも対応できそうです。
マルチバイト入力時には letter-spacing で無理やり ascii と幅を合わせる。みたいなこともできそうです。
今見えている要件を私が実装するなら、ざっと調べた範囲で
・マルチバイトはリアルタイムに弾く
・透過は少しだけ残し、背景色と文字色を同色にする。
・選択時は ::selection でも使用して、反転した文字列が見えないように調整
って感じにすると思います。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/12/13 10:07