焦点位于"input" 类型的按钮上时出现问题。
我有一个按钮 <input type="submit"> (CSS-input[type="submit"])。
此按钮具有主要样式和悬停样式。
我还希望添加一种带有某种加载动画的焦点样式(单击时)。
问题是需要点击两次才能提交:第一次 - 在按钮上，第二次 - 在样式上，第一次点击时显示。因为它， Action 没有开始，所以加载动画无限显示。
这个问题我在CodePen上表示，大家可以自行查看。 https://codepen.io/Auditive/pen/OeVdYL .
在CodePen上你需要点击“提交”按钮，然后会加载动画，你需要再次点击它来执行提交 Action 。 第二次尝试时它不会重复，但如果重新加载代码片段或页面 - 它会再次发生。
我也在这里复制代码:
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，我没有任何版权声明。
最佳答案
罪魁祸首是 ShowResult() 函数中的这个 if 条件
if (result.style.display === "none") {
当它第一次被调用时，显示属性并不像您预期的那样 none - 它只是一个空字符串。稍后您明确将其设置为无，这就是它之后起作用的原因。
要修复，让 if 条件也查找空字符串
if (result.style.display == "none" || result.style.display == "") {
关于javascript - 双击必要的 "input[]:focus"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56581913/