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

【问题标题】：Add TOGGLE to "show div when text is entered"将 TOGGLE 添加到“输入文本时显示 div”
【发布时间】：2012-09-27 15:41:38
【问题描述】：

用户在开始输入时可以看到输入字段下方出现的选项。这是当前执行此操作的 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>
</body>

我还试图让用户在输入之前也可以选择打开 div，也可以在输入后关闭 div...

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

【问题讨论】：

用户实际使用什么来手动切换它？

标签： jquery input toggle jquery-events

【解决方案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

【讨论】：

感谢您的快速回复。我之前有这种可能性，但问题是当你再次开始输入时，div 再次显示。认为一旦第一次按下切换按钮，无论如何都可以停用打字显示？

【解决方案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

【讨论】：

感谢您的快速回复。我之前有这种可能性，但问题是当你再次开始输入时，div 再次显示。认为一旦第一次按下切换按钮，无论如何都可以停用打字显示？