我在使用 .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>
关于javascript - 问题 : Input focus using javascript and CSS transition,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47036254/