当前位置: 首页 > 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.dtcms.com/a/206499.html

相关文章:

  • MRI学习笔记-表征相似性分析(Representational Similarity Analysis, RSA)
  • RNN神经网络
  • 大模型Pre-Training实战解析:实现Qwen3增量预训练
  • Python实现PDB文件预处理
  • LeetCode 404.左叶子之和的递归求解:终止条件与递归逻辑的深度剖析
  • 中科方德鸳鸯火锅平台使用教程:轻松运行Windows应用!
  • 【竖排繁体识别】如何将竖排繁体图片文字识别转横排繁体,转横排简体导出文本文档,基于WPF和腾讯OCR的实现方案
  • One-shot和Zero-shot的区别以及使用场景
  • 计算机操作系统(十一)调度器/调度程序,闲逛调度与调度算法的评价指标
  • 如何排查服务器 CPU 温度过高的问题并解决?
  • PYTHON训练营DAY29(补)
  • uniapp实现大视频文件上传-- 阿里云oss直传方式 - app、H5、微信小程序
  • SQL语句面试题
  • 整平机:工业制造中的关键设备
  • Chrome 插件网络请求的全面指南
  • Chrome 缓存文件路径
  • 基于B/S架构的质量监督检验报告自动生成管理系统有何亮点?
  • 系统性能分析基本概念(2):性能模型
  • 每日Prompt:像素风格插画
  • 一、web安全基础入门
  • MLpack 开源库介绍与使用指南
  • 实现了TCP的单向通信
  • 征程 6 J6E/M linear 双int16量化支持替代方案
  • 野火鲁班猫(arrch64架构debian)从零实现用MobileFaceNet算法进行实时人脸识别(四)安装RKNN Toolkit2
  • Java—— IO流 第三期
  • 基于 AMDXCVU47P HBM2 FPGA 的 2 路 100G 光纤 PCIe 高性能计算加速卡
  • redis Pub/Sub 简介 -16 (PUBLISH、SUBSCRIBE、PSUBSCRIBE)
  • Linux 强制访问控制深度解析:机制、比较与战略部署
  • 【VLNs篇】05:TGS-在无地图室外环境中使用视觉语言模型进行轨迹生成和选择
  • 基于FPGA控制电容阵列与最小反射算法的差分探头优化设计