9

2つのフィールドがあるログインフォームを作成しています-

簡略化：

<input type="text">
<input type="password" placeholder="1234567" >

私のテスト（FF、Chrome）では、プレースホーラーは灰色のテキストを表示します。パスワード「ドット」にプレースホルダーテキストを含めるにはどうすればよいですか？ また、IEでプレースホルダーをサポートしていますか？

例えば。ユーザーには、テキスト1233467ではなく、偽の灰色のパスワードが表示されます。

（jqueryを利用できます）

どうもありがとうございます、

ハーレー

編集：これはプレースホルダーを使用する間違った方法のようです。ただし、どうすればIEサポートを利用できますか？ありがとう

4

3 に答える 3

46

次のように、プレースホルダーでパスワードドットコードを使用してみてください。

placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;"

IEでのサポートについては、IEのパスワードフィールドのプレースホルダーテキストの表示や、このjavascriptを使用したIE/Firefoxのパスワードボックスではなくテキストのプレースホルダー機能などの他のスレッドを参照してください。

于 2012-07-17T14:05:00.270 に答える
2

更新された質問に答えるには、

私はこのスレッドで与えられた答えから構築しています。

フォームをスパン要素でラップします。次に、パスワードフィールドにプレースホルダーとしてラベルを追加できます。最後に、パスワードの入力時にラベルを削除するには、パスワードフィールドのキーを押してバインドし、ラベルからテキストを削除します。コードの例を次に示します。おそらくIDを変更する必要があります。

<span style="position: relative;">
<input id="password" type="password" placeholder="Password" >
<label id="placeholder" style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="password">Password</label>
</span>
<script type="text/javascript">
    $(document).ready(function(){
        $('#password').keypress(function(){
            $('#placeholder').html("");
        });
    });
</script>
于 2012-07-17T15:12:25.050 に答える
1

私はUXの観点からこれに反対していますが、これに対する答えを提供します。

HTML5属性placeholderを使用するvalue代わりに、代わりに使用してください。

<input type="password" value="1234567">

次に、を空の文字列focusに置き換えます。value

var inputs = document.getElementsByTagName('input'),
    i = 0;
for (i = inputs.length; i--;) {
  listenerForI(i);
}

function listenerForI(i) {
  var input = inputs[i],
      type = input.getAttribute('type'),
      val = input.value;
  if (type === 'password') {
    input.addEventListener('focus', function() {
      if (input.value === val) input.value = '';
    });
    input.addEventListener('blur', function() {
      if (input.value === '') input.value = val;
    });
  }
}

繰り返しになりますが、このアプローチはお勧めしませんが、これであなたが探していることはできます。

編集：

placeholderjQueryを使用してブラウザでサポートされていない場合に機能を模倣するこのページにアクセスしてください： http ：//www.cssnewbie.com/cross-browser-support-for-html5-placeholder-text-in-forms/

于 2012-07-17T14:02:17.137 に答える