如何根據文字長度立即顯示和隱藏字段？ - 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的

回答

相關問題