4

パスワード フィールドに「パスワード」と書かれた透かしが必要です。

これが私のコードです:
jquery:

$(document).ready(function() {

    var watermark = 'Password';

    //init, set watermark text and class
    $('#input_pwd').val(watermark).addClass('watermark');

    //if blur and no value inside, set watermark text and class again.
    $('#input_pwd').blur(function(){
        if ($(this).val().length == 0){
            $(this).val(watermark).addClass('watermark');
        }
    });

    //if focus and text is watermrk, set it to empty and remove the watermark class
    $('#input_pwd').focus(function(){
        if ($(this).val() == watermark){
            $(this).val('').removeClass('watermark');
        }
    });
});

html:

<input class="ui_input" id="input_pwd" type="password" name="pass" id="pass" style="height:25px; width:250px; font-size:14px;" required />

私のjsfiddle： ここをクリック


編集: 私は jquery を好みます :)

編集: 私たちの兄弟であるコンラッド・ガジナは、私が探していたものをくれましたが、皆さんの努力に感謝します!

4

9 に答える 9

5

html を使用するplaceholder

<input class="ui_input" id="input_pwd" type="password" name="pass" id="pass" style="height:25px; width:250px; font-size:14px;" placeholder='Password' required />

そして、それにはjsは必要ありません。

注: プレースホルダー属性は、Internet Explorer 10、Firefox、Opera、Chrome、および Safari でサポートされています。残念ながら、コメントに記載されているように、古い IE では機能しません。

于 2013-04-26T10:01:20.013 に答える
0

MathriasのjQuery Placeholder プラグインについて誰も言及していないことに驚いています。これにより、IE8 などの HTML5 をサポートしない古いブラウザーで placeholder 属性を使用できるようになります。

デモ: http://mathiasbynens.be/demo/placeholder

ただし、フォントには注意してください。IE8 は、カスタム フォントのパスワード フィールドのドットをサポートしていません。

于 2013-04-26T10:36:29.723 に答える
0

HTML5 を使用できない場合は、@Konrad Gadzina による最初の回答に従ってモードを切り替えてみるか、次のフィドルを試してください: http://jsfiddle.net/w4Hh4/3/

パスワード ボックスの横にテキスト ボックスを配置し、フォーカスとぼかしに切り替えます。

$(document).ready(function() {

    var watermark = 'Password';

   //init, set watermark text and class
      $('#input_pwd').hide();
      $('#input_pwd_fake').val(watermark).addClass('watermark');

//if blur and no value inside, set watermark text and class again.
$('#input_pwd').blur(function(){

    if ($(this).val() == ''){
        $(this).hide();
        $('#input_pwd_fake').show().val(watermark).addClass('watermark');
    }
});

//if focus and text is watermrk, set it to empty and remove the watermark class
$('#input_pwd_fake').focus(function(){
    $(this).hide();
    $('#input_pwd').show().focus();
});
});
于 2013-04-26T10:12:05.763 に答える
0

これは、値が設定されているかどうかを確認する単純な JavaScript であり、onfocus または onblur のいずれかのデフォルト設定値と等しいため、クロスブラウザで機能します。

<input type="password" onfocus="if(this.value=='Password') {this.value='';}" onblur="if(this.value=='') {this.value='Password'}" value="Password" />
于 2013-04-26T10:23:23.470 に答える
0

Internet Explorer をサポートしたい場合は、入力フィールドの上にフローティング ラベルを配置することで対応できます。つまり、<input>タグには CSS を含む対応する<label>タグがありfloat: left、ラベルが入力フィールドの上になるように配置されます。.click()また、入力フィールドをアクティブにしてラベルを非表示にするラベルと、ラベルをそれぞれ非表示および表示する入力フィールドに.focus()、イベント ハンドラーを追加する必要があります。.blur()

Internet Explorer をサポートする必要がない場合は、タグのplaceholder属性で十分です。<input>

于 2013-04-26T10:02:26.663 に答える