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

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.xdnf.cn/news/595693.html

相关文章:

  • 准备好,开始构建:由 Elasticsearch 向量数据库驱动的 Red Hat OpenShift AI 应用程序
  • 手写ES6 Promise() 相关函数
  • 怎么把https://github.com项目拉到自己的github
  • 在Ubuntu18.04下搭建SadTalker让图片开口说话
  • 第五章:异步幻境 · 时间与数据的秘密
  • STM32之温湿度传感器(DHT11)
  • 纯惯导(INS)的误差来源及其对静态漂移曲线的影响
  • SS928V100(Hi3403V100)----NNN推理引擎,AMCT-ONNX模型压缩量化踩坑记录(LINUX版)
  • 数据指标体系:企业数字化转型的“数字基因“革命
  • Even Split_CodeForces - 1666E分析与解答
  • 【三轴加速度计】QMA6100P数据手册解析
  • 基于RFSOC49DR-16收16发 PCIE4.0 X8 射频采集卡
  • 航电系统之云台检测技术篇
  • 5月22总结
  • 浅聊一下搭建企业私有知识库的可行方案
  • Springboot3
  • mapbox V3 新特性,实现三维等高线炫酷效果
  • Linux(Ubuntu)新建文件权限继承问题
  • MQTT-主题(Topic)
  • DeepSeek:以开源之力,引领AI技术新风潮
  • MySQL初阶:JDBC
  • 海盗王客户端创建角色遮罩层修改成自适应窗口尺寸
  • 学习笔记:黑马程序员JavaWeb开发教程(2025.4.10)
  • QT入门基础
  • python训练营打卡第31天
  • 【C++】控制台小游戏
  • 【人工智能】低代码基础技术讲解,规则引擎,在低代码平台上的作用,有哪些规则引
  • 前端请求状态出现CORS错误
  • CarPlay有线连接流程
  • 陕西安全员考试报名流程是怎样的?