我在使用.focus()
函数和CSS过渡时遇到了javascript怪异的问题。
请参阅下面的jsFiddle。
我有一个带有搜索输入的模态。
单击#trigger
时,它会向模式添加一个类,并输入一个focus()
(以改善用户体验)。
直到...我使用CSS过渡使其平滑(在opacity
和visibility
属性上),它才有效。
有什么想法可能来自这个问题吗?
提前致谢!
let trigger = document.getElementById('trigger'),
closer = document.getElementById('closer'),
box = document.getElementById('wrapper'),
sInput = document.getElementById('search__input')
trigger.addEventListener('click', () => {
box.classList.add('is-visible')
sInput.focus()
})
closer.addEventListener('click', () => {
box.classList.remove('is-visible')
})
#wrapper {
position: fixed;
top: 0; left: 0; right: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.8);
visibility: hidden;
opacity: 0;
transition: opacity .1s linear, visibility .1s linear .1s;
}
#wrapper.is-visible {
opacity: 1;
visibility: visible;
transition: visibility .1s linear, opacity .1s linear .1s;
}
#closer {
position: absolute;
top: 10px; left: 10px;
color: #000;
background-color: white;
}
#search__input {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
font-size: 24px;
}
<a href="#" id="trigger">Click me.</a>
<div id="wrapper">
<a href="#" id="closer">Close me.</a>
<input type="search" placeholder="Search here" id="search__input"/>
</div>
没有CSS过渡的想法相同
let trigger = document.getElementById('trigger'),
closer = document.getElementById('closer'),
box = document.getElementById('wrapper'),
sInput = document.getElementById('search__input')
trigger.addEventListener('click', () => {
box.classList.add('is-visible')
sInput.focus()
})
closer.addEventListener('click', () => {
box.classList.remove('is-visible')
})
#wrapper {
position: fixed;
top: 0; left: 0; right: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.8);
visibility: hidden;
opacity: 0;
}
#wrapper.is-visible {
opacity: 1;
visibility: visible;
}
#closer {
position: absolute;
top: 10px; left: 10px;
color: #000;
background-color: white;
}
#search__input {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
font-size: 24px;
}
<a href="#" id="trigger">Click me.</a>
<div id="wrapper">
<a href="#" id="closer">Close me.</a>
<input type="search" placeholder="Search here" id="search__input"/>
</div>
最佳答案
之所以会发生这种情况,是因为隐藏的,未显示的元素或不透明的元素无法被聚焦,而在过渡时,您的元素也无法被聚焦。
Why changing visibility/display on focus does not work?
要解决它,我将使用超时回调来推荐
let trigger = document.getElementById('trigger'),
closer = document.getElementById('closer'),
box = document.getElementById('wrapper'),
sInput = document.getElementById('search__input')
trigger.addEventListener('click', function() {
box.classList.add('is-visible');
setTimeout(()=>{
sInput.focus();
},1000);
})
closer.addEventListener('click', () => {
box.classList.remove('is-visible')
})
#wrapper {
position: fixed;
top: 0; left: 0; right: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.8);
visibility: hidden;
opacity: 0;
transition: opacity .1s linear, visibility .1s linear .1s;
}
#wrapper.is-visible {
opacity: 1;
visibility: visible;
transition: visibility .1s linear, opacity .1s linear .1s;
}
#closer {
position: absolute;
top: 10px; left: 10px;
color: #000;
background-color: white;
}
#search__input {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
font-size: 24px;
}
<a href="#" id="trigger">Click me.</a>
<div id="wrapper">
<a href="#" id="closer">Close me.</a>
<input type="search" placeholder="Search here" id="search__input"/>
</div>