vue 2 - 输入时按钮@click不起作用：焦点随高度变化

Posted 2023-02-23

【中文标题】vue 2 - 输入时按钮@click不起作用：焦点随高度变化

【英文标题】：vue 2 - button @click not working when input has :focus with height change

【发布时间】：2017-10-14 20:37:49

【问题描述】：

我有一个简单的表单，只有一个文本区域和一个按钮。单击按钮后，我正在使用 vue 和 axios 发送 textarea 数据。

一切正常，我可以使用 :focus 来举例更改输入边框，但当我使用 :focus 更改文本区域的高度时停止工作。

当我单击按钮 textarea 正确失去焦点时，高度将更改为默认值，但不会触发按钮上的事件。当我再次单击按钮时（当 textarea 不在焦点上时）该按钮可以正常工作并触发 @click 事件。

html:

<form>
<textarea v-model="msg2" @keyup.enter="clickADD" id="wallpost" ></textarea>
<button type="button" @click="clickADD">ADD</button>
</form>

css:

#wallpost 
    height: 2em;
 

#wallpost:focus
 
    height: 5em;

vue js：

methods: 
    clickADD: function (e) 
            console.log('clickADD');
,

https://jsfiddle.net/xan1222o/

我也尝试过添加 .focus 类但也没有结果：

html:

<form>
<textarea v-model="msg2" :class="focus : postFocus" @focus="postFocus = true" @blur="postFocus = false"  @keyup.enter="clickADD" id="wallpost" ></textarea>
<button type="button" @click="clickADD">ADD</button>
</form>

css:

#wallpost.focus 
    height: 5em;

处理css的最佳方法是什么：专注于输入并触发@click on button？

【参考方案1】：

这是因为当按钮释放时高度改变了，所以点击事件还没有完成。 尝试用 mousedown 替换 click 怎么样？这不是一个激进的解决方案，但适用于您的情况。Code Snippet

<button type="button" @mousedown="clickADD">ADD</button>

【讨论】：

感谢@choasia - 您的解决方案有效，但我不确定使用 mousedown 而不是 (at)click 来处理该事件有多安全和普遍。

嗨，我不知道你所说的“安全”是什么意思，它只是触发原生 mousedown 事件。 developer.mozilla.org/en/docs/Web/Events/mousedown

我的意思是可以完全替代点击的东西（至少在那种情况下）。将始终在需要时触发，并且不会与其他事件发生冲突（以不同的顺序触发或阻止某些事情）。但我会对其进行测试，因为它看起来像简单而优雅的解决方案。

当然。如果您发现任何副作用，请随时向我展示您的结果。

【参考方案2】：

发生了什么：在文本区域外的 mousedown 时，它失去焦点，导致重绘在 mouseup 完成单击之前移动按钮。如果您按住鼠标而不是松开鼠标，然后将鼠标移到按钮上，然后松开，您完成了对按钮的点击，点击触发器触发。不幸的是，这不是对用户行为的合理预期。

您可以做什么：使用您设置为焦点和模糊的类控制外观，等待鼠标离开添加按钮以移除：

<textarea v-model="msg2" id="wallpost" ref="ta" @focus="setActive" @blur="clearActive"></textarea>
<button type="button" @click="clickADD" @mouseenter="allowBlur(false)" @mouseleave="allowBlur(true)">ADD</button>

...

setActive(e) 
  e.target.classList.add('active');
,
clearActive() 
  if (this.blurAllowed) 
    this.$refs.ta.classList.remove('active');
  
,
allowBlur(whether) 
  this.blurAllowed = whether;
  this.clearActive();

Updated fiddle

【讨论】：

看起来@blur 不适合我。 .active 类在失去焦点时不会被移除。我签入了歌剧和铬。

将this.nextTick(() 更改为this.$nextTick(()。它会正常工作的。

是的，它现在可以正确处理@blur，但是 clickADD 停止工作（当 textarea 聚焦时） - 所以我在起点。 (at)blur 有效，(at)click 有效，但它们不能一起工作。我的目标是在单击按钮时缩小模糊文本区域并通过 clickADD 提交数据。但是 textarea 也应该在失去焦点时总是缩小。

感谢@Pradeepb。

@RoyJ 我不是基于：focus，我正在尝试使用您的解决方案jsfiddle.net/xan1222o/2 - 通过焦点和模糊添加和删除类 .active 但正如我上面描述的 clickADD 不是当 textarea 成为焦点时触发。它对你有用吗？我可以使用 choasia 的解决方案，但我更喜欢在处理按钮单击时使用 (at)click。