Firefox browser press enter key to send information and Chinese input method press enter to determine how to solve the conflict?

1. I made a simulated Wechat chat window, Firefox will have the following problems when sending chat messages: Chinese input such as pinyin: nihao, presses the enter key to send nihao directly to the chat window; while chrome browser presses enter to display nihao in the input box and then press enter again to send it to the chat window.

2. The front-end code is as follows:

<el-input class="chat-input"
  type="textarea"
  :rows="4"
  resize="none"
  placeholder="..."
  @keyup.enter.native="submitChat"
  v-model="chatInput"></el-input>
<el-button class="btn-enter" size="small" type="primary" @click="submitChat"></el-button>

3. Baidu said to replace keyup with keydown ( https://www.jb51.net/article/.). It is true that I will not send Pinyin directly after I try to change it to keydown, but the value chatInput bound to the input box cannot be cleared when I press enter again. After the message is sent out, the content of the input box changes the line:

:

4. If you send a message through the enter key, chrome and Google will flash the cursor to wrap the line and then send it to the chat window. Clicking the send button to trigger the submitChat () method does not have this phenomenon. I compared the Wechat web version in both browsers. Turn to God for help to solve this problem. Thank you

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"> <el-input v-model="input" type="textarea" v-demo="submitChat" placeholder=""></el-input> <ol> <li v-for="(item, i) in list" :key="i">{{ item }}</li> </ol> </div> </body>  <script src="https://unpkg.com/vue/dist/vue.js"></script>  <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="http://cdn.bootcss.com/rxjs/5.2.0/Rx.min.js"></script> <script> const Observable = Rx.Observable; // `v-demo` Vue.directive('demo', { bind: function (el, binding, vnode) { const textarea = el.querySelector('textarea') const keyup$ = Observable .fromEvent(textarea, 'keyup') .filter(t => t.keyCode === 13) const keydown$ = Observable .fromEvent(textarea, 'keydown') .filter(t => t.keyCode === 13) const source = Observable .merge(keydown$, keyup$) .scan((prev, cur) => { const val = cur.type === 'keyup' ? -1 : 1 const sum = Math.max(0, prev.sum + val) return { sum, submit: prev.sum === 1 && val === -1, event: cur, }; }, { sum: 0, submit: false, event: null, }) .filter(t => t.submit) .map(t => t.event); source.subscribe(e => { const func = binding.value func(e) }) } }) new Vue({ el: '-sharpapp', data: function () { return { input: null, list: [], } }, methods: { submitChat(e) { const val = e.target.value this.list.push(val) } } }) </script> </html>