【CSS・inputタグ】パスワードを黒丸で隠したい！【ブラウザに保存させない】
こんにちは．kakeです．プログラミングのテキストエリア問題です．
キーワードはパスワード，ブラウザ保存，inputタグです．
開発者「inputでテキストを入力するときに，パスワードを黒い丸で隠したい，でもブラウザには保存させたくない．inputのtypeでpasswordにするとどうしてもブラウザが保存するかどうかを聞いてくる！どうしよう！！！」
ということで，今回は，パスワードの表示についてです．上記のようなケースはあまりないとは思いますが，私はありましたので，一応書いておきます．
スポンサードサーチ
Contents
【CSS・inputタグ】パスワードを黒丸で隠したい！【ブラウザに保存させない】
さて早速やっていきましょう．
結論：CSSで文字を黒丸で隠す，typeは”text”
結論です．
style="-webkit-text-security:disc;"
上記のCSSを加えてあげればOKです!
input type="text" size="30" name="password" oncopy="return false" style="-webkit-text-security:disc;"
これで，OKです．実際に打ってみてください．ちなみに，oncopy="return false"を付け加えることで入力した文字をコピーできないようになります．
type=”password”について
普通，パスワードのように表示させたい場合，inputタグのtype属性をtype="password"とするかと思います．
すると，ブラウザはパスワード保存するかどうか求める仕様になっています．
そこで，何か他の属性を使って，保存させないようにできないかと考えるわけですが，残念ながら現在はそのような属性がないそうです．（昔はできても今はできないみたいなものもあるらしい（autocompleteでの対応））
type=”text”は保存するかどうか聞かれない
type="password"はだめでしたが，type="text"はブラウザから保存するかは求められません．
type="text"のときは黒丸になは当然ならないので，CSSで対応しようということですね．