web-dev-qa-db-ja.com

HTMLパスワードフィールドに表示される記号の変更

アスタリスクを変更する方法はありますか（*）、または一部のブラウザでは箇条書き記号（•）、HTMLのパスワードフィールドに表示されますか？

htmlinputpasswords
35
Jimvanz

標準パスワードフィールドのパスワードマスキング文字は変更できません。テキストボックスで偽造することもできますが、パスワードテキストボックスから保護を取得できないため、セキュリティモデルが脆弱になります。副次的な注意として、ユーザーはある形式のマスキングに慣れているため、このようなアイテムの動作を変更することは一般的には良い考えではありません。 dそれを避けてください。

38
Pete OHanlon

独自のフォントを作成し、@font-faceにfont-familyおよびfont-size（およびinput[type="password"]）を使用します。問題の解決に役立つはずです。しかし...箇条書きとアスタリスク文字を置き換えてフォントを作成する必要があります。フォント内のすべての文字番号は、同じ文字を表す場合があります。 Googleを使用して、ベクターフォントを編集する無料のプログラムを見つけます。

「不可能」とは決して言わないでください。問題のハックを見つける必要があります。

シンボルに置き換える文字（Chrome、Firefox、MSIEの場合）：26AB、25E6、25CF、25D8、25D9、2219、20F0、2022、2024、00B7、002A。

（18C）

36
18C

いいえ-ユーザーエージェントは独自のデフォルトスタイルを選択し、マスキング文字を決定するために変更できるCSS属性は（私の知る限り）ありません。

もちろん、パスワードフィールドが単なる標準テキストフィールドであり、javascriptイベントハンドラー（おそらくonKeyPress）を使用して入力を手動でマスクした場合、これは可能です。 HTMLでtype="password"としてフィールドを宣言し、JS関数でDOMを変更してそのタイプを変更することもできます。ただし、これには少し注意が必要です。ブラウザの実装はほぼ確実に非常に堅実であり、確立されたセキュリティ機能を回避して独自のロールを作成することはめったに良いアイデアではありません。

4
Andrzej Doyle

今のところ、これはWebkitブラウザーで可能であるかのように見えます。例とドキュメントについては、 http://help.dottoro.com/lcbkewgt.php をご覧ください。

パスワード入力には適用されません

<input type="text" style="-webkit-text-security: square;" />

この回答が書かれた時点では、他のブラウザーに適したソリューションはありません。また、Webkitブラウザーでも、指定できる文字は非常に限られています。

4
www139

私はそれが非常に古い質問であることを知っていますが、今日この問題に直面し、このアプローチを使用してそれを解決しました： https://github.com/Mottie/input-password-bullet

基本的に、デフォルトのポイントを別のアイコンに割り当てる新しいフォントを作成しました。次に、プロジェクトにフォントファイルをインポートし、次のようなCSSを追加するだけです。

@font-face {
    font-family: 'fontello';
    src: url('/fonts/fontello.eot');
    src: url('/fonts/fontello.eot') format('embedded-opentype'),
    url('/fonts/fontello.woff') format('woff'),
    url('/fonts/fontello.ttf') format('truetype'),
    url('/fonts/fontello.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

input[type="password"] {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    color: red;
    font-size: 16px;

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */

    /* add spacing to better separate each image */
    letter-spacing: 2px;
}

お役に立てれば！

3
Isaac Bosca
<input type="text" style="-webkit-text-security: circle;" />
3
Joseph Eduardo Mejia Laos