这是一个创建于 2090 天前的主题，其中的信息可能已经有所发展或是发生改变。
我做了一个搜索框，旁边有一个按钮，然后给搜索框设置了一个动画，当 focus 时宽度会变长，这时候按钮会随着框变长离开原来的位置，这时候我直接去点按钮没有效果，比如：
#html
<input class="sou-input">
<button>搜索</button>
#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 绑定事件，搜索框失去焦点时，如果里面有内容则保持宽度不变 |
Select Language