Question

我有一个登录表单，每当有人点击输入时，我想通过添加一个大纲来设置它的动画。当使用jquery时，我尝试了不同的方法，我可以启动动画，但是我无法将其关闭。当有人点击其他地方时，我希望动画能够脱落。我试过使用*选择器，但无济于事。以下是我的代码的结构：

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Fira+Sans|Roboto+Condensed');
textarea:focus, input:focus{
    outline: none;
}
body {
    background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkvMfKjaJCpaOFlBZwHp2EuQobP9J9Ejuvgyvls8UvxRsmk2vqWA') no-repeat center center fixed;
    background-size: cover;
}
@media screen and (min-width: 550px) {
.login-cont {
    width: 500px;
    background-color: white;
    border-radius: 5px;
}
.input-cont {
    border: none;
    width: 400px;
    height: 70px;
    text-align: center;
    margin: 20px 35px;
    background-color: gainsboro;
}
.log-input {
    border: none;
    text-align: left;
    height: 70px;
    width: 325px;
    background-color: gainsboro;
    margin-left: 15px;
    font-size: 20px;
    font-family: "Roboto Condensed";
    font-weight: normal;

}
.inp-ali1 {
    text-align: left;
    float: left;
    font-size: 20px;
    margin: 22.5px 0;
    height: 25px;
}
.inp-ali2 {
    text-align: left;
    float: left;
    font-size: 21px;
    margin: 23.5px 0;
    height: 25px;
}
}
.col-centered {
    float: none;
    margin-left: 25px;
    margin-right: 25px;
    margin: 25px auto;
}
.log-title {
    font-family: "Fira Sans";
}
.wb {
    text-align: center;
    font-size: 20px;
    font-family: "Fira Sans";
}
.smt-btn {
    border-radius: 10px;

}
a:link {
    font-size: 15px;
}
.inp-act {
    outline: deeppink solid 3px;
}
@media screen and (max-width: 549px) {
    .login-cont {
        background-color: white;
        margin-left: 3%;
        margin-right: 3%;
        border-radius: 0.75%;
        width: inherit;
    }
}

＆＃13;

<head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><head>
<div class="text-center">
    <div class="login-cont col-centered text-center navbar-form">
<br>
<br>
        <h1 class="log-title">LOGIN</h1>
        <br>
        <form action="/Home.html">
        <div class="input-cont">
            <span class="stay"><label><i class="fa fa-envelope-o inp-ali1" aria-hidden="true"></i><input  type="email" class="log-input" placeholder="Email" required>
            </label></span>
        </div>
        <div class="input-cont">
           <span class="stay"><label><i class="fa fa-lock inp-ali2" aria-hidden="true"></i><input type="password" class="log-input" placeholder="Password" required></label></span>
        </div>
        <br>
        <span><label for="remember"><input type="checkbox" name="rememberme" id="remember"></label></span>
        <br>
        <button class="smt-btn btn">Submit</button> 
        <br>
        <br>
        <a href="#">Forgot your password?</a> <br>
        <a href="#">New? Register.</a>
        <br>
        </form>
    </div>

＆＃13;

所以，我有一个inp-act类要添加到登录输入的容器div中，这就是我想要使用的内容。我的最终目标是，当单击输入时，轮廓将显示，当一个单击时，它将消失。

Answer 1

您可以使用jQuery focusin()和focusout()。

在焦点上，使用closest()将inp-act课程添加到.input-cont。删除焦点后，删除该类。

＆＃13;

var input = $('.log-input');

input.each(function() {
  $(this).focusin(function() {
    $(this).closest('.input-cont').addClass('inp-act');
  });
  $(this).focusout(function() {
    $(this).closest('.input-cont').removeClass('inp-act');
  });
});

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Fira+Sans|Roboto+Condensed');
textarea:focus,
input:focus {
  outline: none;
}

body {
  background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkvMfKjaJCpaOFlBZwHp2EuQobP9J9Ejuvgyvls8UvxRsmk2vqWA') no-repeat center center fixed;
  background-size: cover;
}

@media screen and (min-width: 550px) {
  .login-cont {
    width: 500px;
    background-color: white;
    border-radius: 5px;
  }
  .input-cont {
    border: none;
    width: 400px;
    height: 70px;
    text-align: center;
    margin: 20px 35px;
    background-color: gainsboro;
  }
  .log-input {
    border: none;
    text-align: left;
    height: 70px;
    width: 325px;
    background-color: gainsboro;
    margin-left: 15px;
    font-size: 20px;
    font-family: "Roboto Condensed";
    font-weight: normal;
  }
  .inp-ali1 {
    text-align: left;
    float: left;
    font-size: 20px;
    margin: 22.5px 0;
    height: 25px;
  }
  .inp-ali2 {
    text-align: left;
    float: left;
    font-size: 21px;
    margin: 23.5px 0;
    height: 25px;
  }
}

.col-centered {
  float: none;
  margin-left: 25px;
  margin-right: 25px;
  margin: 25px auto;
}

.log-title {
  font-family: "Fira Sans";
}

.wb {
  text-align: center;
  font-size: 20px;
  font-family: "Fira Sans";
}

.smt-btn {
  border-radius: 10px;
}

a:link {
  font-size: 15px;
}

.log-input {
  transition: .3s ease-in-out;
}

.inp-act {
  outline: 3px solid purple;
}


@media screen and (max-width: 549px) {
  .login-cont {
    background-color: white;
    margin-left: 3%;
    margin-right: 3%;
    border-radius: 0.75%;
    width: inherit;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <head>
    <div class="text-center">
      <div class="login-cont col-centered text-center navbar-form">
        <br>
        <br>
        <h1 class="log-title">LOGIN</h1>
        <br>
        <form action="/Home.html">
          <div class="input-cont">
            <span class="stay"><label><i class="fa fa-envelope-o inp-ali1" aria-hidden="true"></i><input  type="email" class="log-input" placeholder="Email" required>
            </label></span>
          </div>
          <div class="input-cont">
            <span class="stay"><label><i class="fa fa-lock inp-ali2" aria-hidden="true"></i><input type="password" class="log-input" placeholder="Password" required></label></span>
          </div>
          <br>
          <span><label for="remember"><input type="checkbox" name="rememberme" id="remember"></label></span>
          <br>
          <button class="smt-btn btn">Submit</button>
          <br>
          <br>
          <a href="#">Forgot your password?</a> <br>
          <a href="#">New? Register.</a>
          <br>
        </form>
      </div>

＆＃13;

Answer 2

在没有测试的情况下写出我的想法，我通常会使用某种类切换来删除所有非活动项的类，并附加“活跃的＆＃39;聚焦元素的类。在这种情况下，它可能看起来像这样：

$('.input-cont').on('click', function() {
    $('.input-cont').removeClass('input-active');
    $(this).addClass('input-active');
});

.input-active将拥有您现在可以设置动画的所有焦点输入样式。

希望这有帮助。

Answer 3

如果我正确阅读此内容，可以使用简单的CSS :focus

来实现

textarea,input{
    outline:none;
}
textarea:focus,input:focus{
    outline: #000000 dotted thick;
}

或者，如果您希望它实际上是动画，您可以在transition上使用border-width或类似的东西，有点像这样：

textarea,input{
    border: 0px solid red;
    transition: border-width 0.25s linear;
}
textarea:focus,input:focus{
    border-width: 5px;
}

注意：我没有测试任何一个。

JQuery动画表单大纲

3 个答案: