0

私は単純な入力フィールドを持っています

<input id="pass" name="pass" value="" size="12" type="password" />

と同じページの隠し画像

<img src="./magnifier.png" id="show" alt="" style="display:none;"/>

テキストを入力 (id="pass") に挿入したときに画像 (id="show") を表示することは可能ですか?

空の入力 = 画像なし、入力内のテキスト = 画像

4

3 に答える 3

2

私は次の行に沿って何かを提案します：

$('#pass').keyup(function(){
    var hasValue = this.value.length > 0;
    $('#show')[hasValue ? 'show' : 'hide']();
});

JS フィドルのデモ。

または、（おそらく過度に複雑な）三項演算子への依存なし：

$('#pass').keyup(function(){
    var hasValue = this.value.length > 0;
    $('#show').toggle(hasValue);
});

JS フィドルのデモ。

ページ読み込み時に画像を表示するには (#pass値があると仮定します):

$('#show').toggle($('#pass').val().length > 0);

$('#pass').keyup(function(){
    var hasValue = this.value.length > 0;
    $('#show').toggle(hasValue);
});

JS フィドルのデモ。

参考文献:

于 2013-04-12T22:45:43.070 に答える
1 
    $('#pass').keypress(function(){
        if($(this).val()!='')
        $('#show').show() //or may be with an effect
            else
        $('#show').hide()
    });
于 2013-04-12T22:45:55.150 に答える
1 
$('#pass').keyup(function () {
        var value=$('#pass').val();
        if (value != "") {
            $("#show").css("display", "block");
        }
        else {
            $("#show").css("display", "none");
        }

    });

私が間違っている場合は修正してください。

于 2013-04-12T22:57:09.137 に答える