Необходимость двойного щелчка по «input []: focus» - PullRequest
Новая
       22

Необходимость двойного щелчка по «input []: focus»

0 голосов
/ 13 июня 2019

Получена проблема с фокусировкой на кнопке с типом "input" .

У меня есть кнопка, которая <input type="submit"> (css - input[type="submit"]). Эта кнопка имеет основной стиль и стиль наведения. Также я хочу добавить стиль на фокусе (по клику) с некоторой анимацией загрузки.

Проблема заключается в необходимости дважды щелкнуть для отправки: первый - при нажатии, второй - при включенном стиле, который отображается при первом нажатии. Из-за этого действие не начинается, поэтому анимация загрузки отображается бесконечно.

Я представляю эту проблему в CodePen, так что вы можете проверить это самостоятельно. https://codepen.io/Auditive/pen/OeVdYL.

В CodePen вам нужно нажать на кнопку «Отправить», после чего будет загружаться анимация, на которую вам нужно нажать еще раз, чтобы выполнить действие отправки. При второй попытке это не повторяется, но если перезагрузить фрагмент кода или страницу - это происходит снова.

Также я дублирую код здесь: 

function ShowResult() {
  setTimeout(function() {
     var result = document.getElementById("result");
     if (result.style.display === "none") {
       result.style.display = "block";
     } else {
       result.style.display = "none";
     }
   }, 2000); //Delay for 2 seconds
}

function ShowMain() {
  var result = document.getElementById("result");
  if (result.style.display === "block") {
    result.style.display = "none";
  } else {
    result.style.display = "block";
  }
}
@import url('https://fonts.googleapis.com/css?family=Titillium+Web&display=swap');

body {
  background: #222;
}

.main {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 0.5s ease;
}

#result {
  display: none;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, #333, #444);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 50;
  animation: fadein 0.25s linear;
  animation-fill-mode: forward;
}

input[type="submit"] {
  font-family: 'Titillium Web', sans-serif;
  font-size: 32px;
  background: #fff0;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 4px;
  padding: 5px 10px 5px 10px;
  margin-top: 5%;
  box-shadow: 0px 0px 8px 0px #fff0;
  transition: all 0.25s ease;
}

input[type="submit"]:hover {
  font-family: 'Titillium Web', sans-serif;
  font-size: 32px;
  background: #fff0;
  color: #56ef56;
  border: 1px solid #56ef56;
  border-radius: 4px;
  padding: 5px 10px 5px 10px;
  margin-top: 5%;
  box-shadow: 0px 0px 8px 0px #56ef56;
  cursor: pointer;
  transition: all 0.25s ease;
  animation: glow 1s linear infinite;
}

input[type="submit"]:focus {
  background: #262626;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background-image: url(https://i.imgur.com/gVX3yPJ.gif);
  background-repeat: no-repeat;
  background-size: 200px;
  background-position: 50% 50%;
  color: #fff0;
  border: 0;
  margin-top: 0;
  box-shadow: 0px 0px 0px 0px #fff0;
  transition: all 0.25s ease;
  outline: 0;
}

p {
  font-family: 'Titillium Web', sans-serif;
  font-size: 50px;
  font-weight: 600;
  text-align: center;
  color: #45cb45;
  margin-top: 1%;
}

img {
  width: 60px;
  height: 60px;
  animation: fading 2s linear infinite;
}

#btn-close {
  display: block;
  font-family: 'Titillium Web', sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  background: #353535;
  color: #fff;
  border: 1px solid #ff444400;
  border-radius: 4px;
  padding: 5px 10px 5px 10px;
  margin: 0 auto;
  margin-top: 2.5%;
  box-shadow: 0px 2px 4px 0px #0000;
  transition: all 0.25s ease;
}

#btn-close:hover {
  display: block;
  font-family: 'Titillium Web', sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  background: #353535;
  color: #ff4444;
  border: 1px solid #ff444400;
  border-radius: 4px;
  padding: 5px 10px 5px 10px;
  margin: 0 auto;
  margin-top: 2.5%;
  box-shadow: 0px 2px 4px 0px #000;
  cursor: pointer;
  transition: all 0.25s ease;
}

@keyframes fadein {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes glow {
  0% {box-shadow: 0px 0px 8px 0px #56ef56;}
  50% {box-shadow: 0px 0px 8px 0px #56ef5600;}
  100% {box-shadow: 0px 0px 8px 0px #56ef56;}
}

@keyframes fading {
  0% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 1;}
}
<body>
  <div class="main">
      <input type="submit" onclick="ShowResult()" value="Submit Me">
    <div id="result">
      <p>
        Submitted!
        <img src="https://i.imgur.com/X3D85Ns.png">
      </p>
      <button id="btn-close" onclick="ShowMain()">Close</button>
    </div>
  </div>  
</body>

Запрашиваем любые идеи по поводу решения. С надеждой. Пожалуйста.

P.S .: Изображения и GIF, используемые только для тестирования и взятые из Google Pictures, у меня нет претензий по авторскому праву.

1 Ответ

1 голос
/ 13 июня 2019

Преступник - это условие if внутри вашей ShowResult () function 

if (result.style.display === "none") {

При первом вызове свойство display не является none как и следовало ожидать - это просто пустая строка.Позже вы устанавливаете для него значение explicity, поэтому оно работает потом.

Для исправления заставьте условие if искать и пустую строку 

if (result.style.display == "none" || result.style.display == "") {
...