el-input文本域textarea 实现回车不换行 ctrl+enter换行
[ 2023/12/22, Vue , 62阅, 0评 ]

QQ截图20250409141813.jpg

经常使用el-input组件的朋友们都知道,当使用其文本域功能时,在输入框中敲回车的行为是换行。

那么问题来了,某些场景下,要使回车行为触发自己另外的事件(比如对话场景中的“发送”,此时“换行”功能也要托付给另外的按键,例如ctrl+enter键),该如何操作呢?

我们可以通过监听el-inputkeydown事件来处理,栗子如下:

<el-input
  ref="inputRef"
  v-model="questionStr"
  type="textarea"
  placeholder="输入问题,发送 [Enter]/换行 [Ctrl(Alt/Shift) + Enter]"
  :rows="1"
  :autosize="{ minRows: 1, maxRows: 8 }"
  resize="none"
  class="input-box-cpt"
  @keydown="onInputKeydown($event)"
/>
const questionStr = ref('')

const onSend = () => {
  console.log(questionStr.value)
}

const onInputKeydown = (event: KeyboardEvent) => {
  if (event.keyCode == 13) {
    if (!event.ctrlKey && !event.altKey && !event.shiftKey) {
      event.preventDefault()
      onSend()
    } else {
      questionStr.value += '\n'
    }
  }
}

有朋自远方来...评论一下呗O(∩_∩)O