JQuery从文本框中隐藏/显示答案

【问题标题】：JQuery hide/show from textboxJQuery从文本框中隐藏/显示
【发布时间】：2018-05-01 15:43:27
【问题描述】：

我正在尝试根据不同输入元素的值显示/隐藏密码字段。

例如，如果用户名是“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/>

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

【问题讨论】：

那么问题是什么？
@Ankur 如何在用户输入管理员时切换密码字段。上面的代码不起作用，密码字段仍然存在
onkeypress=togglePassword 应该这样做
@Ankur 不是的

标签： javascript jquery html togglebutton

【解决方案1】：

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

其次，你需要在释放键时调用它，即你需要使用onkeyup。否则，您的密码字段将更新一次击键“为时已晚”，因为 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/>

【讨论】：

【解决方案2】：

您可以使用keyup 事件和toggle() 函数来切换隐藏/显示。

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

$("#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/>

【讨论】：

【解决方案3】：

在确保区分大小写的情况下尝试以下代码:)

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

【讨论】：

【解决方案4】：

添加 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 语法。

【讨论】：