jquery - jquery - 将文本插入输入时显示隐藏图像

Question

我有一个简单的输入字段

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

和同一页面上的隐藏图像

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

当我将文本插入输入（id="pass"）时，是否可以显示图像（id="show"）？

空输入 = 没有图像，输入内的文本 = 图像

Answer 1

我建议以下内容：

$('#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 小提琴演示。

参考：

• hide().
• show().
• toggle().

Answer 2

$('#pass').keyup(function () {
        var value=$('#pass').val();
        if (value != "") {
            $("#show").css("display", "block");
        }
        else {
            $("#show").css("display", "none");
        }

    });

如果我错了，请纠正。

Answer 3

    $('#pass').keypress(function(){
        if($(this).val()!='')
        $('#show').show() //or may be with an effect
            else
        $('#show').hide()
    });