將TOGGLE添加到「在輸入文本時顯示div」

用戶在開始輸入時能夠看到輸入字段下方顯示的選項。這是目前做到這一點的JavaScript：將TOGGLE添加到「在輸入文本時顯示div」

#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他們的類型以及之前的選項，並且還一度關閉同時股利它出現後輸入...

關於如何操縱代碼的任何想法？

來源

2012-09-27 David

什麼用戶實際要使用手動切換呢？ –

使用toggle()功能 - DEMO

$(function() { 

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

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

});

UPDATE

要禁用提示重新出現是由按鈕單擊禁用後 - 簡單地從它解除綁定事件偵聽器：

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

DEMO

來源

2012-09-27 15:47:14

感謝您的快速響應。我之前有過這種可能性，但問題在於，當你再次打字時，div再次顯示。認爲一旦第一次觸發切換時，仍然需要停止鍵入顯示。 – David

我更喜歡這個解決方案，謝謝！ – David

請看我的更新如何禁用提示 –

要處理的重點和模糊功能吧..試試這個

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

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

});

Check DEMO

來源

2012-09-27 15:47:49

感謝您的快速回復。我之前有過這種可能性，但問題在於，當你再次打字時，div再次顯示。認爲一旦第一次觸發切換時，仍然需要停止鍵入顯示。 – David

將TOGGLE添加到「在輸入文本時顯示div」

回答

相關問題