### 如何在
textarea 中通过 `@keydown.enter` 实现
文字换行
为了实现在 `<
textarea>` 组件中按下 Enter 键时不触发其他额外的行为（如提交表单），而是仅执行正常的
文字换行功能，可以参考
Vue 的事件修饰符以及键盘事件的相关处理逻辑。
以下是基于
Vue 和 Element UI 的
解决方案：
#### HTML 结构
```html
<el-input
type="
textarea"
:rows="4"
class="text-input"
placeholder="请
输入内容"
v-model="
textarea"
@keydown.enter.prevent.stop="handleEnter">
</el-input>
```
#### 方法定义
```javascript
methods: {
handleEnter(e) {
// 如果需要支持 shift+enter 进行特殊操作，则可以通过判断 e.shiftKey 来区分不同按键组合
if (!e.shiftKey && e.keyCode === 13) {
// 此处无需做任何事情，默认情况下
textarea 已经实现了回车
换行的功能
return;
}
// 可选：如果需要扩展更多功能（比如 shift+enter 提交消息）
if (e.shiftKey && e.keyCode === 13) {
console.log("Shift + Enter 被按下");
// 执行特定逻辑，例如发送消息
}
},
}
```
上述代码片段中的 `.prevent` 和 `.stop` 是
Vue 的事件修饰符[^1]。`.prevent` 阻止了浏览器的默认行为（即防止
页面刷新或其他可能的操作）。而 `.stop` 则停止了事件冒泡，从而避免影响父级组件或全局监听器。
需要注意的是，在标准的 `<
textarea>` 元素中，按下 Enter 键会自动插入新行字符 `\n` 或者 `\r\n`，因此通常不需要手动干预来实现
换行效果。但如果希望自定义某些行为（例如禁用 Enter 键或者绑定特殊的按键组合），则需要显式调用 `event.preventDefault()` 并编写相应的业务逻辑[^2]。
---
### 完整示例
以下是一个完整的
Vue 组件示例，展示如何结合 `@keydown.enter` 处理不同的按键组合场景：
```html
<template>
<div>
<el-input
type="
textarea"
:rows="4"
class="text-input"
placeholder="请
输入内容"
v-model="
textarea"
@keydown.enter.prevent.stop="onEnterPress">
</el-input>
</div>
</template>
<script>
export default {
data() {
return {
textarea: '',
};
},
methods: {
onEnterPress(e) {
if (e.shiftKey && e.keyCode === 13) {
console.log('Shift + Enter 被按下');
this.sendMessage();
} else if (e.ctrlKey && e.keyCode === 13) {
console.log('Ctrl + Enter 被按下');
this.saveMessage();
} else {
// 默认情况下的 Enter
换行
console.log('正常
换行');
}
},
sendMessage() {
console.log('发送消息:', this.
textarea);
},
saveMessage() {
console.log('
保存消息:', this.
textarea);
},
},
};
</script>
```
在此示例中，我们分别针对 Shift+Enter 和 Ctrl+Enter 设置了不同的回调函数，并保留了普通的 Enter 键作为默认的
文字换行功能[^3]。
---
### 总结
通过合理使用
Vue 的事件修饰符和原生 JavaScript 的键盘事件 API，可以在不破坏用户体验的前提下轻松定制 `<
textarea>` 的交互行为。无论是简单的
文字换行还是复杂的多键组合操作，都可以借助此方法高效实现。
---
本文介绍如何在数据库中存储包含换行符的文本，并在读取时正确还原换行效果，通过使用正则表达式进行匹配与替换。
扫一扫
1527
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
