按钮被动画挤开时无法点击怎么办？附代码

[MrCard]

我做了一个搜索框，旁边有一个按钮，然后给搜索框设置了一个动画，当 focus 时宽度会变长，这时候按钮会随着框变长离开原来的位置，这时候我直接去点按钮没有效果，比如：

#html

<input class="sou-input"> <button>搜索</button>

#css .sou { transition: width 0.3s; }

input:focus { outline-offset: -2px; }

要怎么才能在按钮被挤开时也可以点击呢？

[linchengzzz]

....有效果呀,你再检查下你的代码 ,试了下没问题
<style>
.sou-input {
width: 100px;
transition: width 0.3s;
}
input:focus {
width: 150px;
}
</style>
<input class="sou-input" />
<button onclick="handleClick()">搜索</button>
<script>
const input = document.querySelector('.sou-input');
function handleClick() {
console.log(input.value);
}
</script>

[MrCard]

@linchengzzz
我用你的也不行，在按钮移动后直接点击没有输出内容，得等到搜索框失去焦点，按钮回到原来位置时才可以输出

[linchengzzz]

@MrCard onclick 改为 onmousedown 试下

[MrCard]

@linchengzzz
谢谢啦，用另一种办法了，js 绑定事件，搜索框失去焦点时，如果里面有内容则保持宽度不变