Question

用户可以在输入字段开始输入时看到输入字段下方显示的选项。这是目前执行此操作的JavaScript：

    #number {
    display:none;
    }

    <body onload="
    $('#gname').bind('keyup change',function(){
    if(this.value.length > 0){
    $('#number').show();
    }
    else {
    $('#number').hide();}
    });
    ">

    <input type="text" id="gname">

    <div id="number">
        testing testing
    </div>

我也试图让用户选择在他们输入之前切换div，并且在输入后出现div时切换div ...

关于如何操纵代码的任何想法？

Answer 1

使用toggle()功能 - DEMO

$(function() {

    $('#gname').on('keyup change', function() {
        if (this.value.length > 0) {
            $('#number').show();
        } else {
            $('#number').hide();
        }
    });    

    $("#hint").on("click", function() {
        $('#number').toggle();
    });

});

<强>更新

要禁用按钮单击禁用后重新显示的提示 - 只需从中取消绑定事件监听器：

$("#hint").on("click", function() {
    $('#number').toggle();
    $('#gname').off('keyup change');
});

DEMO

Answer 2

您想要处理它的焦点和模糊功能。试试这个

$('#gname').bind('keyup change blur', function() {
    if (this.value.length > 0) {
        $('#number').show();
    }
    else {
        $('#number').hide();
    }
});

$('#gname').on('focus', function() {
    $('#number').show();

});

Check DEMO

将TOGGLE添加到“输入文本时显示div”

2 个答案: