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

我有两个输入文本是这样的：如何根据文字长度立即显示和隐藏字段？ - JQuery的

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的变化？

来源

2016-05-01 DinhNgocHien

*“'textLength <= 0'”* - 获得很多负长度的字符串吗？无论如何，你需要将你的长度测试放在由事件处理程序触发的事件处理程序中，例如['“input”'event]（https://developer.mozilla.org/en-US/docs/Web/Events/input）。 '（“＃input1”）。on（“input”，function（）{...}）;' – nnnnnn

你可以试试这个代码：

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

来源

2016-05-01 05:29:36

你可以将它包装在jquery或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

来源

2016-05-01 04:45:48 gihan

你怎么得到inputTextlength？ –

这不起作用。 keydown事件在输入的'.value'更新之前触发，所以'.length'将不正确。另外，如果用户在不使用键盘的情况下编辑该字段，该怎么办？ – nnnnnn

文章编辑其工作。 – gihan

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

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

来源

2016-05-01 04:48:36 dYale

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

首先分配一个通用类像

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

来源

2016-05-01 04:53:51

明确引用两个输入的ID的函数并不是真的“更通用”，但在任何情况下这都不起作用。 'this'引用的对象没有'.val（）'方法。在输入值更新之前触发keydown事件，所以'.length'将不正确。另外，如果用户在不使用键盘的情况下编辑该字段，该怎么办？ – nnnnnn

@nnnnnn ..与你达成一致。已经更新了答案..它的工作原理与所述的html一致。 –

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

来源

2016-05-01 04:54:19

与此代码替换您的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"); 
     } 
    }); 
});

来源

2016-05-01 06:54:21 Santosh

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

回答

相关问题