火狐瀏覽器按回車鍵發(fā)送信息和中文輸入法按回車確定存在沖突怎么解決？

1.我做了一個模擬微信聊天的窗口，發(fā)送聊天消息時火狐瀏覽器會出現(xiàn)如下問題：中文輸入時比如輸入拼音：nihao，按enter鍵就直接把nihao發(fā)送到聊天窗口了；而chrome瀏覽器是按enter后先在輸入框出現(xiàn)nihao然后再次按enter才發(fā)送到聊天窗口。

2.前端代碼如下：

<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">發(fā)送</el-button>

3.百度有說是把keyup換成keydown（https://www.jb51.net/article/...），我嘗試換成keydown后確實是不會直接就把拼音發(fā)送出去，但是再次按enter時輸入框綁定的值chatInput無法清除，信息發(fā)送出去后輸入框內(nèi)容換行：

下面是提交方法的代碼：

submitChat() {
    let useroutput = this.chatInput.trim();
    this.chatInput = '';
    this.chatData.push({
        respondent: 'user',
        output: useroutput,
        url: ''
    });

    setTimeout(_ => {
        this.scrollLast();
    });

    this.$axios.get(this.ip + '/kcbonline', {
        params: {
            text: useroutput,
            nlp_revise: this.modulesData["nlp_revise"],
            dl_dlf: this.modulesData["dl_dlf"],
            dl_dlv2: this.modulesData["dl_dlv2"],
            dl_tdl: this.modulesData["dl_tdl"],
            dl_dl: this.modulesData["dl_dl"],
            dl_dlr: this.modulesData["dl_dlr"],
            nlp_datetime: this.modulesData["nlp_datetime"],
            nlp_weather: this.modulesData["nlp_weather"],
            tp_turing: this.modulesData["tp_turing"],
            dl_dlrf: this.modulesData["dl_dlrf"],
        }
    }).then(res => {
        if (res.data.result === 1) {
            // let url = data.url ? data.url : '';
            let url = '';
            setTimeout(_ => {
                this.chatData.push({
                    respondent: 'robot',
                    //output: data.output,
                    output: res.data.data,
                    url: url
                });
            }, 200);
            setTimeout(_ => {
                this.scrollLast();
            }, 400)
        } else {
            this.error(res.data.msg);
        }
    });
},

如果是通過點擊發(fā)送按鈕來發(fā)送的話就可以正常清空：

4.如果是通過enter鍵發(fā)送消息chrome和谷歌都會閃現(xiàn)光標(biāo)換行之后再發(fā)送到聊天窗口，點擊發(fā)送按鈕觸發(fā)submitChat()方法就沒有這現(xiàn)象，我對比了微信網(wǎng)頁版在兩個瀏覽器中都是正常的，求助大神幫忙解決這問題，謝謝

回答

編輯回答

解夏

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- 引入樣式 -->
  <link rel="stylesheet" >
</head>

<body>
  <div id="app">
    <el-input v-model="input" type="textarea" v-demo="submitChat" placeholder="請輸入內(nèi)容"></el-input>
    <ol>
      <li v-for="(item, i) in list" :key="i">{{ item }}</li>
    </ol>
  </div>
</body>
<!-- 先引入 Vue -->
<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: '#app',
    data: function () {
      return {
        input: null,
        list: [],
      }
    },
    methods: {
      submitChat(e) {
        const val = e.target.value
        this.list.push(val)
      }
    }
  })
</script>

</html>

https://segmentfault.com/a/11...

2018年5月9日 07:57