【vue2】回车发送,Ctrl+回车换行,shift+回车换行禁用

vue页面内使用

html 复制代码
 <el-input
                :disabled="inputdisabled"
                ref="inputRef"
                id="text-input"
                v-model="messinput"
                @keydown.native="Keydown"
                placeholder="请输入您的问题,可通过Ctrl+回车换行"
                type="textarea"
                resize="none"
                :autosize="{ minRows: 1, maxRows: 4 }"
              ></el-input>
javascript 复制代码
// 回车发送(shift+回车换行,浏览器默认,ctrl+回车换行)
    Keydown (event) {
      // 回车发送
      if (!event.ctrlKey && !event.shiftKey && event.keyCode == 13) {
        event.cancelBubble = true; //ie阻止冒泡行为
        event.stopPropagation();//Firefox阻止冒泡行为
        event.preventDefault(); //取消事件的默认动作*换行
        //以下处理发送消息代码
        if (!this.BtnDisabled) {
          this.sub()
        }
      } else if (event.key === 'Enter' && event.shiftKey) {
        // shift+回车换行禁用
        event.cancelBubble = true; //ie阻止冒泡行为
        event.stopPropagation();//Firefox阻止冒泡行为
        event.preventDefault(); //取消事件的默认动作*换行
      } else if (event.key === 'Enter' && event.ctrlKey) {
        // ctrl+回车换行
        event.preventDefault(); // 阻止默认的换行行为
        const selectionStart = event.target.selectionStart; // 获取光标位置
        this.messinput = this.messinput.substring(0, selectionStart) + '\n' + this.messinput.substring(selectionStart);
        // 重设光标位置
        this.$nextTick(() => {
          event.target.selectionStart = selectionStart + 1;
          event.target.selectionEnd = selectionStart + 1;
        });
      }
    },

js原生

html 复制代码
<textarea class="custom" id='text-area' placeholder="输入消息..." value='' rows=2 ></textarea>
javascript 复制代码
document
      .getElementById("text-area")
      .addEventListener("keydown", function (event) {
        // 回车发送
        if (!event.ctrlKey && !event.shiftKey && event.keyCode == 13) {
          event.cancelBubble = true; //ie阻止冒泡行为
          event.stopPropagation(); //Firefox阻止冒泡行为
          event.preventDefault(); //取消事件的默认动作*换行
          //以下处理发送消息代码
          if (!messageInput.disabled) {
            sendMessage();
          }
        } else if (event.key === "Enter" && event.shiftKey) {
          // shift+回车换行禁用
          event.cancelBubble = true; //ie阻止冒泡行为
          event.stopPropagation(); //Firefox阻止冒泡行为
          event.preventDefault(); //取消事件的默认动作*换行
        } else if (event.key === "Enter" && event.ctrlKey) {
          // ctrl+回车换行
          event.preventDefault(); // 阻止默认的换行行为
          let textarea = document.getElementById("text-area");
          let cursorPos = textarea.selectionStart;
          let v = textarea.value;
          let textBefore = v.substring(0, cursorPos);
          let textAfter = v.substring(cursorPos, v.length);
          textarea.value = textBefore + "\n" + textAfter;
          textarea.selectionStart = cursorPos + 1;
          textarea.selectionEnd = cursorPos + 1;
        }
      });
相关推荐
Never_Satisfied3 分钟前
在JavaScript / HTML中,line-height是一个CSS属性
javascript·css·html
浅川.2515 分钟前
xtuoj string
开发语言·c++·算法
望获linux18 分钟前
【实时Linux实战系列】实时系统的可观测性:Prometheus 与 Grafana 集成
大数据·linux·服务器·开发语言·网络·操作系统
用户9163574409533 分钟前
LeetCode热题100——15.三数之和
javascript·算法
skykun33 分钟前
都2026年了还在说闭包吗?
javascript
饮水机战神37 分钟前
小程序被下架后,我连夜加了个 "安全接口"
前端·javascript
加油吧zkf44 分钟前
Python入门:从零开始的完整学习指南
开发语言·前端·python
柯南二号1 小时前
【大前端】 TypeScript vs JavaScript:全面对比与实践指南
前端·javascript·typescript
Larry_Yanan1 小时前
QML学习笔记(三十一)QML的Flow定位器
java·前端·javascript·笔记·qt·学习·ui
xqlily1 小时前
Kotlin:现代编程语言的革新者
android·开发语言·kotlin