【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;
        }
      });
相关推荐
腾讯TNTWeb前端团队7 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
拉不动的猪11 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪11 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
uhakadotcom12 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom12 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom12 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom12 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
咖啡教室13 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript
咖啡教室14 小时前
前端开发中JavaScript、HTML、CSS常见避坑问题
前端·javascript·css
市民中心的蟋蟀16 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js