Question

我有一个textarea和按钮的简单形式。我点击按钮后使用vue和axios发送textarea数据。

一切正常，我可以使用：专注于例如更改输入边框但在我使用时停止工作：焦点改变文本区域的高度。

当我点击按钮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？

Answer 1

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

// for auth
import { AngularFireAuth } from 'angularfire2/auth';
// for database
import { AngularFireDatabase } from 'angular2/database';
// for Observables
import {FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';

Answer 2

发生了什么：在textarea外面的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

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

2 个答案: