输入不保持焦点

时间：2019-08-27 02:56:49

标签： jquery html css

由于某种原因，我的输入没有保持焦点（除非我按住鼠标左键并输入）。

我用JQuery尝试了一些动画技巧，这是我不习惯的，所以我想可能与它有关。

$(document).ready(function() {
  $('.tariffCards > div').click(function() {

    $(this).siblings().fadeOut(200);
    $('.tariffCards > div h3').fadeOut(200);
    $('.tariffCards > div span').fadeOut(200);
    $(this).css({
      "transition": "all .9s ease-in-out",
      "transform": 'rotateY(-180deg) translateX(-90%)',
      "height": "35vw",
      'z-index': 2
    });
    $('.form-report').appendTo(this).css({
      "display": "inherit",
      "transform": "scaleX(-1)"
    });
    $('.form-report > a').focus()
  });
});
.tariffCards {
  position: absolute;
  top: 100%;
  left: 25%;
  transform-style: preserve-3d;
  z-index: 1;
}

.tariffCards:after {
  position: absolute;
  bottom: -27px;
  left: 5%;
  content: '';
  width: 65%;
  height: 10px;
  border-radius: 100%;
  background-image: radial-gradient(rgba(34, 50, 84, 0.04), rgba(34, 50, 84, 0));
}

.tariffCards>div {
  position: relative;
  width: 330px;
  height: 180px;
  border-radius: 12px;
  color: #fff;
  transform: rotateX(45deg) rotateY(-15deg) rotate(45deg);
  transition: all 0.4s ease;
  overflow: hidden;
  cursor: pointer;
}

.tariffCards>div:after {
  position: absolute;
  top: -70px;
  left: 0;
  content: '';
  width: 200%;
  height: 200%;
  /*background-image: linear-gradient(60deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.1), rgba(255,255,255,0) 80%);*/
  transform: translateX(-100%);
}

.tariffCards>div h3 {
  position: absolute;
  bottom: 28%;
  left: 50%;
  font-size: 18px;
  font-weight: 800;
  transform: rotate(-90deg);
}

#movi3 h3 {
  bottom: 15% !important;
  left: 57% !important;
}

#flry3 h3 {
  bottom: 23% !important;
}

#pard3 h3 {
  bottom: 35% !important;
  left: 43% !important;
}

.tariffCards>div span {
  position: absolute;
  font-weight: 700;
  width: 100%;
  left: 35%;
  top: -6%;
  /*left: 75%;*/
  font-size: 12px;
  opacity: 0.8;
  transform: rotate(-90deg);
}

.tariffCards>.lren {
  margin-top: 0;
  z-index: 3;
  background-color: #8063e1;
  background-image: linear-gradient(135deg, #bd7be8, #8063e1);
  box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #8063e1;
}

.tariffCards>div.movi {
  margin-top: -70px;
  z-index: 2;
  background-color: #3f58e3;
  background-image: linear-gradient(135deg, #7f94fc, #3f58e3);
  box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #3f58e3;
}

.tariffCards>div.flry {
  margin-top: -70px;
  z-index: 100;
  background-color: #2c6fd1;
  /*background-image: linear-gradient(135deg, #21bbfe, #2c6fd1);*/
  box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #2c6fd1;
}

.tariffCards>div.pard {
  margin-top: -70px;
  background-color: #352f64;
  background-image: linear-gradient(135deg, #415197, #352f64);
  box-shadow: 5px 5px 60px rgba(34, 50, 84, 0.9), 1px 1px 0px 1px #352f64;
}

.tariffCards>div:hover {
  transform: rotateX(30deg) rotateY(-15deg) rotate(30deg) translate(-25px, 50px);
}

.tariffCards>div:hover:after {
  transform: translateX(100%);
  transition: all 1.2s ease-in-out;
}


/*Formulário de inscrição*/

.form-report {
  display: none;
  font-family: Lato;
  margin: 0 auto;
  text-align: center;
  transition: all 2s;
  width: 80%;
  z-index: 3;
}

.form-report form {
  margin-top: 10%;
  margin-bottom: 5%;
  z-index: 3;
}

.form-report form input {
  color: black;
  width: 100%;
  z-index: 3;
}

.container-btn a {
  background-image: linear-gradient(56deg, #08AEEA 0%, #2AF598 100%);
  border: none;
  border-radius: 100px;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
  ;
  color: #fff;
  display: inline-block;
  font-size: 1.3em;
  padding: 5% 10%;
  transition: all .2s;
}

.container-btn a:hover {
  transform: translateY(-3px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="tariffCards">
    <div class="lren">
      <h3>Lojas Renner<br><br>$LREN3</h3>
      <span>Atualizado em 2T19</span>
    </div>
    <div class="movi" id='movi3'>
      <h3>Movida<br><br>$MOVI3</h3>
      <span>Atualizado em 2T19</span>
    </div>
    <div class="flry" id='flry3'>
      <h3>Fleury S.A.<br><br>$FLRY3</h3>
      <span>Atualizado em 2T19</span>
    </div>
    <div class="pard" id='pard3'>
      <h3>Hermes Pardini<br><br>$PARD3</h3>
      <span>Atualizado em 2T19</span>
    </div>
  </div>

  <!--Form aberto ao clicar no relatório-->
  <div class='form-report'>
    <h2>Receba agora.</h2>
    <form>
      <input type="text" placeholder="Nome">
      <br/>
      <input type="text" placeholder="Seu Email">
      <br/>
      <input type="text" placeholder="Celular (SMS de Confirmação)">
    </form>

    <br/>

    <div class='container-btn'>
      <a href="#">Conheça o Curso
        </a>
    </div>
  </div>
</body>

1 个答案:

答案 0 :(得分：3)

当您单击价目表时，它会将表格移动到您用$('.form-report').appendTo(this)单击的DIV中。然后，当您单击表单中的输入时，单击会冒泡至DIV，因此单击处理程序将再次运行，并且$('.form-report > a').focus()会将焦点更改为链接。

为该表单添加一个点击处理程序，以防止事件通过e.stopPropagation();冒泡

$(document).ready(function() {
  $('.tariffCards > div').click(function() {

    $(this).siblings().fadeOut(200);
    $('.tariffCards > div h3').fadeOut(200);
    $('.tariffCards > div span').fadeOut(200);
    $(this).css({
      "transition": "all .9s ease-in-out",
      "transform": 'rotateY(-180deg) translateX(-90%)',
      "height": "35vw",
      'z-index': 2
    });
    $('.form-report').appendTo(this).css({
      "display": "inherit",
      "transform": "scaleX(-1)"
    });
    $('.form-report > a').focus()
  });
  
  $('.form-report').click(function(e) {
    e.stopPropagation();
  });
    
});
.tariffCards {
  position: absolute;
  top: 100%;
  left: 25%;
  transform-style: preserve-3d;
  z-index: 1;
}

.tariffCards:after {
  position: absolute;
  bottom: -27px;
  left: 5%;
  content: '';
  width: 65%;
  height: 10px;
  border-radius: 100%;
  background-image: radial-gradient(rgba(34, 50, 84, 0.04), rgba(34, 50, 84, 0));
}

.tariffCards>div {
  position: relative;
  width: 330px;
  height: 180px;
  border-radius: 12px;
  color: #fff;
  transform: rotateX(45deg) rotateY(-15deg) rotate(45deg);
  transition: all 0.4s ease;
  overflow: hidden;
  cursor: pointer;
}

.tariffCards>div:after {
  position: absolute;
  top: -70px;
  left: 0;
  content: '';
  width: 200%;
  height: 200%;
  /*background-image: linear-gradient(60deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.1), rgba(255,255,255,0) 80%);*/
  transform: translateX(-100%);
}

.tariffCards>div h3 {
  position: absolute;
  bottom: 28%;
  left: 50%;
  font-size: 18px;
  font-weight: 800;
  transform: rotate(-90deg);
}

#movi3 h3 {
  bottom: 15% !important;
  left: 57% !important;
}

#flry3 h3 {
  bottom: 23% !important;
}

#pard3 h3 {
  bottom: 35% !important;
  left: 43% !important;
}

.tariffCards>div span {
  position: absolute;
  font-weight: 700;
  width: 100%;
  left: 35%;
  top: -6%;
  /*left: 75%;*/
  font-size: 12px;
  opacity: 0.8;
  transform: rotate(-90deg);
}

.tariffCards>.lren {
  margin-top: 0;
  z-index: 3;
  background-color: #8063e1;
  background-image: linear-gradient(135deg, #bd7be8, #8063e1);
  box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #8063e1;
}

.tariffCards>div.movi {
  margin-top: -70px;
  z-index: 2;
  background-color: #3f58e3;
  background-image: linear-gradient(135deg, #7f94fc, #3f58e3);
  box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #3f58e3;
}

.tariffCards>div.flry {
  margin-top: -70px;
  z-index: 100;
  background-color: #2c6fd1;
  /*background-image: linear-gradient(135deg, #21bbfe, #2c6fd1);*/
  box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #2c6fd1;
}

.tariffCards>div.pard {
  margin-top: -70px;
  background-color: #352f64;
  background-image: linear-gradient(135deg, #415197, #352f64);
  box-shadow: 5px 5px 60px rgba(34, 50, 84, 0.9), 1px 1px 0px 1px #352f64;
}

.tariffCards>div:hover {
  transform: rotateX(30deg) rotateY(-15deg) rotate(30deg) translate(-25px, 50px);
}

.tariffCards>div:hover:after {
  transform: translateX(100%);
  transition: all 1.2s ease-in-out;
}


/*Formulário de inscrição*/

.form-report {
  display: none;
  font-family: Lato;
  margin: 0 auto;
  text-align: center;
  transition: all 2s;
  width: 80%;
  z-index: 3;
}

.form-report form {
  margin-top: 10%;
  margin-bottom: 5%;
  z-index: 3;
}

.form-report form input {
  color: black;
  width: 100%;
  z-index: 3;
}

.container-btn a {
  background-image: linear-gradient(56deg, #08AEEA 0%, #2AF598 100%);
  border: none;
  border-radius: 100px;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
  ;
  color: #fff;
  display: inline-block;
  font-size: 1.3em;
  padding: 5% 10%;
  transition: all .2s;
}

.container-btn a:hover {
  transform: translateY(-3px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="tariffCards">
    <div class="lren">
      <h3>Lojas Renner<br><br>$LREN3</h3>
      <span>Atualizado em 2T19</span>
    </div>
    <div class="movi" id='movi3'>
      <h3>Movida<br><br>$MOVI3</h3>
      <span>Atualizado em 2T19</span>
    </div>
    <div class="flry" id='flry3'>
      <h3>Fleury S.A.<br><br>$FLRY3</h3>
      <span>Atualizado em 2T19</span>
    </div>
    <div class="pard" id='pard3'>
      <h3>Hermes Pardini<br><br>$PARD3</h3>
      <span>Atualizado em 2T19</span>
    </div>
  </div>

  <!--Form aberto ao clicar no relatório-->
  <div class='form-report'>
    <h2>Receba agora.</h2>
    <form>
      <input type="text" placeholder="Nome">
      <br/>
      <input type="text" placeholder="Seu Email">
      <br/>
      <input type="text" placeholder="Celular (SMS de Confirmação)">
    </form>

    <br/>

    <div class='container-btn'>
      <a href="#">Conheça o Curso
        </a>
    </div>
  </div>
</body>

相关问题
最新问题