我做了一个搜索框,旁边有一个按钮,然后给搜索框设置了一个动画,当 focus 时宽度会变长,这时候按钮会随着框变长离开原来的位置,这时候我直接去点按钮没有效果,比如:
#html
#css .sou { transition: width 0.3s; }
input:focus { outline-offset: -2px; }
要怎么才能在按钮被挤开时也可以点击呢?
1
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> |
2
MrCard OP @linchengzzz
我用你的也不行,在按钮移动后直接点击没有输出内容,得等到搜索框失去焦点,按钮回到原来位置时才可以输出 |
3
linchengzzz 2019-03-09 11:08:27 +08:00
@MrCard onclick 改为 onmousedown 试下
|
4
MrCard OP @linchengzzz
谢谢啦,用另一种办法了,js 绑定事件,搜索框失去焦点时,如果里面有内容则保持宽度不变 |