關於enter及ctrl_enter換行及發送切換問題

  v-if="submitCommond ==='enter'"
  id="messgae_input"
  v-model="currentMessage"
  class="border-none"
  type="textarea"
  autofocus
  rows="7"
  :readonly="loading"
  placeholder="請輸入內容"
  @keyup.enter.exact="keyEnter($event)"
  @keyup.ctrl.enter="lineFeed($event)"
/>
<textarea
  v-if="submitCommond === 'ctrl'"
  id="messgae_input"
  v-model="currentMessage"
  class="border-none"
  type="textarea"
  autofocus
  rows="7"
  :readonly="loading"
  placeholder="請輸入內容"
  @keyup.ctrl.enter.exact="keyCtrlEnter($event)"
  @keyup.enter.exact="lineFeed($event,'enter')"
/>

keyCtrlEnter(event) {
  this.btnIsDisabled()
  this.setSubmitBtnDisabled()
  this.getSubmitBtnIsDisabled()
  // console.log('ctrl' + this.loading)
  if (this.submitCommond === 'ctrl' && !this.submitBtnDisabled && !this.loading && this.haveMessage) {
    this.loading = true
    this.submitNewMsg()
    event.preventDefault()
  }
},

  lineFeed(event, ctrl) {
  if (ctrl === 'enter') {
    return
  }
  // console.log('換行')
  // console.log(this.currentMessage)
  event.preventDefault()
  this.currentMessage = this.currentMessage + '\n'
},

1.不能使用el-textarea,無法設置exact,
而設置 @keyup.ctrl.enter.exact="keyCtrlEnter($event)"可以解決按 ctrl+enter仍然觸發enter事件的問題。

2.textarea需要設置autofocus自動獲取焦點,才能實現enter或ctrl+enter發送。
3.enter發送過程中,設置loading變量監聽發送狀態。 將變量賦給readonly屬性來禁止發送時輸入。注意:不能使用disable屬性來禁止發送,disabled在發送後會自動失去焦點。必須要再次點擊textarea才能再次獲取到焦點,而readonly就不會發送後自動失去焦點。

4.textarea默認enter換行,所以在enter和ctrl+enter時,如果使用enter換行不需要再對數據設置n

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章