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

2019-03-09 09:58:47 +08:00
 MrCard

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

#html

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

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

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

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

1160 次点击
所在节点    程序员
4 条回复
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 绑定事件,搜索框失去焦点时,如果里面有内容则保持宽度不变

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/542726

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX