JQuery hide/show 来自文本框

Question

我正在尝试根据不同输入元素的值将密码字段设置为 shown/hidden。

例如，如果用户名是 "admin"，它应该隐藏密码字段。

如果您输入任何其他内容，密码字段将出现或保留。

function togglePassword() {
  if ($("#j_username").val() == "admin")
    $("#j_password").hide();
}

<label>User Name</label>
<input type='text' id="j_username" name='j_username' style='text-align: Left;' MaxLength='100' size='20' tabindex='1' onkeypress='javascript:return loginIdKeyPress(event);' />

<label>Password</label>
<input type='password' id="j_password" name='j_password' value='' Align='Left' size='20' tabindex='2' onkeypress='javascript:return passwordKeyPress(event);' />
<br/>

目前这段代码对我不起作用，我应该更改什么？

Answer 1

您可以使用 keyup event along with the toggle() 函数来切换 hide/show。

下面的示例将每次按键时的条件值输出到控制台。如果存在管理字符串，则隐藏密码字段。

$("#j_username").on("keyup", function() {
  //gets value of input element and evaluates if true/false
  var inputValue = ($(this).val() == "admin");
  //outputs value in console for each keypress
  console.log(inputValue);
  //shows password field if inputValue is false, hides if true
  $("#j_password").toggle( !inputValue );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>User Name</label>
<input type='text' id="j_username" name='j_username' style='text-align: Left;' MaxLength='100' size='20' tabindex='1'  />
<br/>
<label>Password</label>
<input type='password' id="j_password" name='j_password' value='' Align='Left' size='20' tabindex='2'/>
<br/>

Answer 2

添加 jQuery 库并执行以下操作：-

$(document).ready(function(){
  $('#j_username').on('input',function(){
    if($(this).val() =='admin'){
      $('#j_password').hide();
    }else{
      $('#j_password').show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>User Name</label>
     <input type='text' id="j_username" name='j_username' style='text-align: Left;' MaxLength='100' size='20' tabindex='1'/>
       <br/>    
<label>Password</label>
<input type='password' id="j_password" name='j_password' value='' Align='Left' size='20' tabindex='2'/>
<br/>

注意：- 您使用的 $ 语法实际上是 jQuery 语法。

Answer 3

尝试使用以下代码确保区分大小写:)

$(document).ready(function(){
  $('#j_username').on('input',function(){
    if($(this).val().toLowerCase().trim() === 'admin'){
      $("#j_password").hide();
    }
    else {
      $("#j_password").show();
    }
  });
});

Answer 4

首先你应该实际调用你的函数togglePassword()

其次，你需要在释放按键时调用它，即你需要使用onkeyup。否则，您的密码字段将更新一次击键 "too late"，因为 onkeypress 会在按下键时调用该函数，即当您按下 "n" 时，它会在实际写入 n 之前被调用。

最后，您还应该包括一个 else 子句，以显示您的 input 以防它被隐藏并且用户名被更改为其他内容。

function togglePassword() {
  if ($("#j_username").val() == "admin") {
    $("#j_password").hide();
  } else {
    $("#j_password").show();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>User Name</label>
<input type='text' id="j_username" name='j_username' style='text-align: Left;' MaxLength='100' size='20' tabindex='1' onkeyup='javascript:togglePassword();' />

<label>Password</label>
<input type='password' id="j_password" name='j_password' value='' Align='Left' size='20' tabindex='2' />
<br/>

JQuery hide/show 来自文本框

JQuery hide/show from textbox

html

javascript

jquery

togglebutton