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

How to show and hide field immediately base on the text length? - JQuery

本文关键字：显示 隐藏 字段 -JQuery 何根 文本      更新时间：2023-09-26

我有两个这样的输入文本：

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

现在我想根据input1中的事件隐藏和显示input2。如果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的更改呢？

您可以尝试以下代码：

$(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>

您可以将其封装在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

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

$(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");
        }
    })
});

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

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

首先分配一个通用类，如

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();
              }      
        }           
    });

用以下代码替换您的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");
      }
  });
});
相关文章：