问题

Question

我正在尝试实现一个类似于松弛的功能，只有在按下确切输入时才会发送消息（没有按下移位）

考虑这个vue模板 <textarea type="text" v-model="message" @keyup.enter.exact="sendMessage($event)"></textarea> 使用此组件

export default {
  name: 'Typing',
  data() {
      return {
          message: null
      }
  },
  methods: {
      sendMessage(e) {
        // e.stopPropagation() and e.preventDefault() have no impact
        this.$socket.emit('message', { text: this.message });
        console.log(this.message); // Print the message with another '\n' at the end due to textarea default behavior
      }
  }
}

有没有人知道如何避免使用最后一个'\ n'而不使用正则表达式删除它然后再将其发送到后端（我认为它会变脏）？

谢谢

PS：我对VueJS堆栈很新，希望我的问题不明显

编辑：This question类似但建议的解决方案无效

Answer 1

问题

<textarea
  type="text"
  v-model="message"
  @keyup.enter.exact="sendMessage($event)"
>
</textarea>

代码在 Enter 键的sendMessage事件上调用keyup方法。在发布密钥后，keyup事件将被触发。因此，代码在按下键后，在键运行（输入换行符）和键释放后的默认行为之后调用方法。 preventDefault无法阻止此问题，因为在keyup事件之前已经发生了试图阻止的行为。

解决方案

我们已经确定了以下内容：

我们希望阻止按 Enter 键的默认行为。

在发生默认行为后触发keyup事件。

解决方案是阻止keydown事件的默认行为，并在keyup事件上调用该方法。

注意：重要的是只调用keyup事件上的方法，以避免在用户按下密钥时多次调用。

<textarea v-model="value" @keydown.enter.exact.prevent @keyup.enter.exact="send" @keydown.enter.shift.exact="newline" > </textarea>

当按下 Enter + Shift 组合时，可以调用在textarea值中附加换行符的方法。

以下是演示解决方案中描述的所有行为的代码段。

new Vue({ template: ` <div> <textarea v-model="value" @keydown.enter.exact.prevent @keyup.enter.exact="send" @keydown.enter.shift.exact="newline" > </textarea> </div> `, data: { value: '', }, methods: { newline() { this.value = `${this.value}\n`; }, send() { console.log('========'); console.log(this.value); console.log('========'); }, }, }).$mount('#root');

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> </head> <body> <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script> </body> </html>

进一步阅读

W3C Specification for Keyboard Events

具体为event order和event types

Answer 2

您的问题解决方案很简单：

＆＃13;

new Vue({
  el: '#app',
  data: {
    message: ''
  },
  methods: {
    sendMessage () {   
      console.log(this.message, this.message.length)
      // this.$socket.emit('message', {text: this.message});
      // clear textarea: this.message = ''
    }
  }
})

＆＃13;

<div id="app">
  <textarea v-model="message" @keydown.enter.exact.prevent="sendMessage"></textarea>
</div>

<script src="https://unpkg.com/vue"></script>

＆＃13;

Answer 3

尝试使用Vue内置prevent

<textarea type="text" v-model="message" @keyup.enter.exact.prevent="sendMessage($event)"></textarea>

VueJS：如何防止textarea默认行为

3 个答案:

问题

解决方案

进一步阅读