Question

我有一个条件，如果两个字段不为空，它将显示按钮。我的问题是如何执行事件，因为它只适用于onload或加载网站。我尝试使用keyup

HTML

<input type="text" id="username" required="true">
<input type="email" id="email"  required="true" >
<button type="submit" id="login">
Sign Up
</button>

JS

$(document).ready(function() {
  if ($('#email').is(':empty') && $('#username').is(':empty')){
    $('#login').hide();
  }
  else {
    $('#login').show();
  }
});

https://jsfiddle.net/w0pohLeb/1/

Answer 1

您可以使用input事件。

// Bind `input` event on both the inputs
$('#email, #username').on('input', function() {
    // toggle: If argument passed is 
    //         true:  show
    //         false: hide
    $('#login').toggle($('#email').val() && $('#username').val());
}).trigger('input'); // Trigger event to call on page load

Answer 2

您无法使用.is(':empty')来检查值是否空虚，仅用于检查标记是否为空并且不包含任何子项。相反，你需要使用：

$(input).val().trim().length === 0

所以你的代码变成了：

if ($('#email').val().trim().length === 0 && $('#username').val().trim().length === 0) {

而且，您需要将此附加到更好的事件上，例如，在输入的keyup上：

最终代码

$(document).ready(function() {
  if ($('#email').val().trim().length === 0 || $('#username').val().trim().length === 0) {
    $('#login').hide();
  }
  else {
    $('#login').show();
  }
  $("#email, #username").keyup(function () {
    if ($('#email').val().trim().length === 0 && $('#username').val().trim().length === 0) {
      $('#login').hide();
    }
    else {
      $('#login').show();
    }
  });
});

Answer 3

试试这个，希望这会有所帮助...... :)

$(document).ready(function() {

  $('body').on('change', 'input', validate);
  validate();

  function validate() {
    var inputLength = 0;
    $('input').each(function() {
      if ($(this).attr('type') == 'text' || $(this).attr('type') == 'email' || $(this).attr('type') == 'password') {

        $(this).val() == '' ? inputLength-- : inputLength++;
      }

    });
    inputLength >= 2 ? notEmpty() : isEmpty();

  };

  function notEmpty() {

    $('#login').show();

  }

  function isEmpty() {

    $('#login').hide();

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="username" required="true">
<input type="email" id="email" required="true">
<button type="submit" id="login">
  Sign Up
</button>

小提琴链接https://jsfiddle.net/j6y2d1ur/1/

如果2个或更多输入字段不为空，则触发事件

3 个答案: