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 Fiddle demo

或者没有（可能过于复杂）依赖于三元运算符：

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

JS Fiddle demo

为了在页面加载上显示图片（假设#pass有值）：

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

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

JS Fiddle demo

参考文献：

• hide()。
• show()。
• toggle()。

Answer 2

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

Answer 3

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

    });

如果我错了，请更正。