双击 "input[]:focus" 的必要性

Question

按钮焦点出现问题，类型为 "input"。

我有一个按钮 <input type="submit"> (css - input[type="submit"] )。此按钮具有主要样式和悬停样式。我还希望添加一种带有某种加载动画的焦点样式（单击时）。

问题是提交需要点击两次：第一次是在按钮上，第二次是在样式上，在第一次点击时显示。因为它，动作没有开始，所以加载动画无限显示。

我在CodePen上反映了这个问题，大家可以自行查看。 https://codepen.io/Auditive/pen/OeVdYL.

在CodePen上你需要点击"Submit"按钮，然后会加载动画，你需要再次点击它来执行提交动作。第二次尝试时它不会重复，但如果重新加载代码片段或页面 - 它会再次发生。

我也在这里复制代码：

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>

询问有关解决方案的任何想法。带着希望。请。

Answer 1

罪魁祸首是 ShowResult() 函数中的 if-condition

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

第一次调用时，显示属性不是您所期望的 none - 它只是一个空字符串。稍后你明确地将它设置为 none 这就是它之后工作的原因。

要修复，让 if-condition 也查找空字符串

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

双击 "input[]:focus" 的必要性

Double click necessity on "input[]:focus"

javascript

css

focus

input