Question

我有两个输入文字：

input1
<input type='text' id='input1' name='input1'>
<br>
input2
<input type='text' id='input2' name='input2'>
<br>

现在我想隐藏input2基于input1中的事件，如果input1中没有文字，则会隐藏input2，反之亦然。我写这样的JQuery代码：

$(document).ready(function () {
    var inputText = document.getElementById("input1");
    var textLength = inputText.value.length;
    if (textLength <= 0){
      $('#input2').hide("fast");
    }
    else{
      $('#input2').show("fast");
    }
  });

仅在每次刷新后才有效。那么如何捕获input1中的输入事件并立即影响到input2的变化？

Answer 1

你可以将它包装在jquery keydown或keyup函数上。

<script>
$(document).ready(function() {
    $("#input1").keydown(function() {
        var inputText = this.value;
        var textLength = inputText.length;
        if (textLength <= 0) {
            $('#input2').hide("fast");
        } else {
            $('#input2').show("fast");
        }
    });
});

JS fiddle

Answer 2

您可以尝试以下代码：

$(document).ready(function () {
  var input1 = $('#input1');
  
  function toggleInput() {
      if(input1.val().length) {
        $('#input2').show("fast");
      } else {
        $('#input2').hide("fast");
      }
  }
  
  toggleInput();
  
  $('#input1').on('keyup', toggleInput);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
input1
<input type='text' id='input1' name='input1'>
<br>
input2
<input type='text' id='input2' name='input2'>
<br>

Answer 3

您需要为这些元素添加事件侦听器。示例主要使用您的原始代码。

$(document).ready(function() {
    $('#input1').on("keyup", function() {
        var inputText = document.getElementById("input1");
        var textLength = inputText.value.length;
        if (textLength <= 0) {
            $("#input2").hide("fast");
        } else {
            $("#input2").show("fast");
        }
    })
});

Answer 4

此解决方案假设您只有两个输入文本框。

首先分配一个像

这样的公共类

input1
<input type='text' id='input1' class='input' name='input1'>
<br>
input2
<input type='text' id='input2' class='input' name='input2'>
<br>

   $(".input").change(function(){
        alert(this.id);
        if(this.id == 'input1')
        {                 
              if ($(this).val().length > 0){
              $("#input2").show();
              } else {
              $("#input2").hide();
              }             
        }
        else
        {
             if ($(this).val().length > 0){
              $("#input1").show();
              } else {
              $("#input1").hide();
              }      
        }           
    });

Answer 5

$('#input1').on('input', function() {
    $('#input2').toggle($(this).val().length === 0);
});

Answer 6

用此代码替换您的javascript！此代码改进了应用程序的性能，因为它只使用了一次选择器！

$(document).ready(function () {
  var input1 = $('#input1');
  var input2 = $('#input2');

  input2.hide("fast");
  input1.on('keyup', function() {
      if(input1.val().length) {
        input2.show("fast");
      } else {
        input2.hide("fast");
      }
  });
});

如何根据文本长度立即显示和隐藏字段？ - JQuery

6 个答案: