Question

$(document).on('click', '#register-continue', function() {
  $('.modal-register-form :input[type=text], .modal-register-form :input[type=email], .modal-register-form :input[type=password]').each(function() {
    $(this).on('input', function() {
      if ($(this).val().length) {
        $(this).css({
          border: '1px solid #e5e5e5'
        });
      } else {
        $(this).css({
          border: '1px solid #fe0000'
        });
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="modal-register-form">
  <div class="user-input">
    <input class="first-name" type="text" placeholder="first name">
    <input class="last-name" type="text" placeholder="last name">
  </div>
  <button type="button" id="register-continue" class="register">continue</button>
</div>

嗨，

任何人都知道，仅当输入字段未聚焦时如何更改边框颜色。当前，如果被选中，它将更改。此外，如果输入为空，则边框在函数开始时也应更改颜色。

感谢您的支持。

最诚挚的问候

Answer 1

根据我对您问题的理解：

您的代码不起作用，因为您试图在事件中获取事件。只需为keyup进行第二个活动。 css阻止默认的浏览器焦点行为。

您可以根据自己的喜好更改事件

var selector = $('.modal-register-form :input[type=text], .modal-register-form :input[type=email], .modal-register-form :input[type=password]');

$(document).on('click', '#register-continue', function() {
  selector.each(function() {
      changeColor($(this));
  });
});

selector.on('focus focusout keyup', function() {
    changeColor($(this));
});


function changeColor(elm) {
if (elm.val().length) {
        elm.css({
          border: '1px solid #e5e5e5'
        });
      } else {
        elm.css({
          border: '1px solid #fe0000'
        });
      }
}

.modal-register-form input {
  outline-width: 0;
  border: 1px solid #e5e5e5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="modal-register-form">
  <div class="user-input">
    <input class="first-name" type="text" placeholder="first name">
    <input class="last-name" type="text" placeholder="last name">
  </div>
  <button type="button" id="register-continue" class="register">continue</button>
</div>

如果我对您的问题的理解不正确，请给我评论，我会添加答案！

Answer 2

使用focus方法删除blur和.on()事件，并根据条件设置两种样式，因为input将被聚焦或未聚焦。如果要使用初始边框样式，请使用CSS。以下演示将在focus事件上将输入的边框更改为蓝色，在blur事件上将输入的边框更改为红色。

演示

$('input').on('focus blur', function(e) {
  if (e.type === 'focus') {
    $(this).css('border', '1px solid #e5e5e5');
  } else {
    $(this).css('border', '1px solid #fe0000');
  }
});

input,
button {
  display: inline-block;
  font-size: 1rem;
  line-height: 1.5;
}

input {
  border: 1px solid #fe0000;
  width: 39%;
  padding: 3px;
}

<form class="modal-register-form">
  <fieldset class="user-input">
    <input class="first-name" type="text" placeholder="first name">
    <input class="last-name" type="text" placeholder="last name">
    <button type="button" id="register-continue" class="btn register">Continue</button>
  </fieldset>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

仅在输入字段未聚焦时更改（输入事件）

2 个答案:

演示