Question

我正在尝试显示/隐藏密码字段，具体取决于不同输入元素的值。

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

添加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 2

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

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

     var arrayFullNames = [
        {name: 'David', surname: 'Jones', age: 29},
        {name: 'Jack', surname: 'Sparrow', age: 33},
        {name: 'Monkey', surname: 'Idontknow', age: 9},
        {name: 'JavaScript' , surname: 'Something', age: '6 weeks'}
    ];

    function onRegister(){
      var userQuestion = prompt("What is your name", '');

    if(userQuestion == arrayFullNames.name){
      alert('name match');
     }else{
      alert('no match');
     }
  }

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

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。否则，您的密码字段将更新一次击键“太晚”，因为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从文本框隐藏/显示

4 个答案: