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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 2410 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

#html

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

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

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

按钮

div

input

Focus

4 条回复 2019-03-09 11:45:09 +08:00

linchengzzz

2019-03-09 10:22:59 +08:00

....有效果呀,你再检查下你的代码 ,试了下没问题
<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

2019-03-09 10:57:58 +08:00

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

linchengzzz

2019-03-09 11:08:27 +08:00

@MrCard onclick 改为 onmousedown 试下

MrCard

2019-03-09 11:45:09 +08:00

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