当前位置: 首页 > article >正文

vue vite textarea标签按下Shift+Enter 换行输入,只按Enter则提交的实现思路

注意input标签不能实现,需要用textarea标签

直接看代码

<template><textareav-model="message"@keydown.enter="handleEnter"placeholder="Shift+Enter 换行,Enter 提交"></textarea>
</template><script setup>
import { ref } from 'vue';const message = ref('');const handleEnter = (e) => {// 如果按下的是 Shift+Enter,允许默认换行行为if (e.shiftKey) {return;}// 单独按下 Enter 键e.preventDefault();// 处理其他逻辑,最后并将message清空message.value = ''; // 清空输入框
};
</script>

最终的效果如下:
在这里插入图片描述
同时按下shift+enter可以实现换行输入

http://www.lryc.cn/news/2383809.html

相关文章:

  • MySQL多线程备份工具mysqlpump详解!
  • 创建信任所有证书的HttpClient:Java 实现 HTTPS 接口调用,等效于curl -k
  • Redisson分布式集合原理及应用
  • 深入理解 PlaNet(Deep Planning Network):基于python从零实现
  • 精益数据分析(75/126):用户反馈的科学解读与试验驱动迭代——Rally的双向验证方法论
  • 仿腾讯会议——视频发送接收
  • 从3.7V/5V到7.4V,FP6291在应急供电智能门锁中的应用
  • java后端-海外登录(谷歌/FaceBook)
  • 【人工智障生成日记1】从零开始训练本地小语言模型
  • Selenium-Java版(frame切换/窗口切换)
  • 一文深度解析:Pump 与 PumpSwap 的协议机制与技术差异
  • 星云智控v1.0.0产品发布会圆满举行:以创新技术重构物联网监控新生态
  • SpringBoot(一)--- Maven基础
  • 基于FPGA控制电容阵列与最小反射算法的差分探头优化设计
  • kakfa 基本了解
  • 基于Browser Use + Playwright 实现AI Agent操作Web UI自动化
  • Origin绘制多因子柱状点线图
  • Web漏洞扫描服务的特点与优势:守护数字时代的安全防线
  • iOS 直播技术及优化
  • 抛弃传统P2P技术,EasyRTC音视频基于WebRTC打造教育/会议/远程巡检等场景实时通信解决方案
  • 俄罗斯军总参情报局APT28组织瞄准援乌后勤供应链发起全球网络攻击
  • 杰发科技AC7801——PWM获取固定脉冲个数
  • MacBookPro上macOS安装第三方应用报错解决方案:遇到:“无法打开“XXX”,因为无法确定(验证)开发者身份?怎么解决
  • MVC和MVVM架构的区别
  • RAG(Retrieval-Augmented-Generation)检索增强生成
  • 黑马点评前端Nginx启动失败问题解决记录
  • 第12天-Python+Qt5开发实战:10大经典案例与深度解析
  • 软件开发命名避开保留关键字指南
  • 力扣第450场周赛
  • React-改变当前页class默认的样式