Bootstrap

vue3 键盘事件 回车发送消息,ctrl+回车 内容换行

<el-input type="textarea" resize="none" show-word-limit v-model="message" ref="textInput" @keydown.shift.enter.prevent @keyup.ctrl.enter.prevent="lineBreak" @keydown.enter.exact.prevent="send">
</el-input>

 shift+回车有默认换行 不需要就禁止

@keydown.shift.enter.prevent

ctrl+回车 内容换行

@keyup.ctrl.enter.prevent="lineBreak"

回车发送消息 

exact 让回车事件只能单独触发,防止和其他组合按键回车触发发送消息 

prevent 阻止默认的换行事件

@keydown.enter.exact.prevent="send"

let message = ref("");
let textInput = ref();

// 换行
function lineBreak() {
  console.log("换行");
  const textarea = textInput.value.textarea; //获取输入框元素
  const start = textarea.selectionStart;
  const end = textarea.selectionEnd;
  const value = textarea.value;
  const newValue = value.substring(0, start) + "\n" + value.substring(end);
  textarea.value = newValue;
  textarea.selectionStart = textarea.selectionEnd = start + 1;
}
// 发送
function send() {
console.log("发送");
}

;