輸入有值時如何顯示div？

Question

我有一個輸入文本和一個隱藏div。

當輸入文本具有值時，我想顯示div。

這是演示： http : //jsfiddle.net/vyc7N/181/

<label for="db">Type whatever</label>
<input type="text"name="amount"  />

<div id="yeah" style="display:none;">
 <input type="submit"   />
</div>

請有人可以幫我嗎？

Answer 1

您可以在文本框的keyup事件中編寫代碼，以獲取在其中輸入的文本的長度。

$('input[name=amount]').keyup(function(){
  if($(this).val().length)
    $('#yeah').show();
  else
    $('#yeah').hide();
});

工作演示

您還可以使用.toggle()而不是.show / .show .hide() ：

  $('input[name=amount]').keyup(function(){
     $('#yeah').toggle($(this).val().length);
  });

Answer 2

$('input[name=amount]').bind('keyup change', function(){
if(!$(this).val())
    $("#yeah").css('display', 'none');
else
    $("#yeah").css('display', '');
});

Answer 3

這是純JavaScript和DOM，沒有jQuery

您可以使用onkeyup() ：

<label>Type whatever</label>
<input id='inptOne' type="text" name="amount" onkeyup="myFunction()" />

<div id="yeah" style="display:none">
    <input type="submit" />
</div>

<script>
//if input has some value will show the button
  window.myFunction = function() {
  //alert('it ran!');
  var hasValue = document.getElementById('inptOne').value;
  if (!!hasValue) {
    document.getElementById('yeah').style.display = 'inline';
  } else {
    document.getElementById('yeah').style.display = 'none';
  };
 };
</script>

單擊此處獲取jsfiddle

Answer 4

工作提琴

使用以下邏輯：如果修剪后有一些值，則顯示其他隱藏。

$('input[name=amount]').keyup(function(){
  if($.trim($(this).val())!='')
    $('#yeah').show();
  else
    $('#yeah').hide();
});