本文介绍一种安全、精准的 javascript 方法，仅在用户按下 enter 键时为当前输入的最后一行自动添加一个项目符号（•），避免重复添加导致的格式错乱。
本文介绍一种安全、精准的 javascript 方法，仅在用户按下 enter 键时为当前输入的最后一行自动添加一个项目符号（•），避免重复添加导致的格式错乱。
在 Web 表单中，常需对多行文本（如职责描述、任务列表）实现「每行以 • 开头」的排版效果。但若每次回车都对全部已有行重新添加符号（如原代码中 split('\n') 后遍历所有行），会导致已带符号的行被反复处理——例如 "• line1" 变成 "• • line1"，引发格式污染。
正确做法是：仅识别并修饰最后一行（即用户刚编辑完、尚未提交的那行），其余行保持原始内容不变。以下是优化后的完整实现：
<textarea id="id_form-0-roles" style="width: 400px; height: 100px;" placeholder="按 Enter 添加项目符号..."></textarea>
document.addEventListener("keydown", function (e) {
const target = e.target;
// 限定作用域：仅响应指定 ID 的 textarea，且仅在 Enter 键（keyCode 13）触发
if (target.id === "id_form-0-roles" && e.key === "Enter" && !e.shiftKey) {
formatRoles(target);
e.preventDefault(); // 阻止默认换行（由我们手动控制）
}
});
function formatRoles(textarea) {
const lines = textarea.value.split("\n");
let formattedText = "";
lines.forEach((line, index) => {
// 仅对最后一行（且非空）添加 •；其他行原样保留
if (index === lines.length - 1 && line.trim() !== "") {
formattedText += "• " + line.trim() + "\n";
} else {
formattedText += line + "\n";
}
});
textarea.value = formattedText;
}✅ 关键改进点说明：
- 使用 e.key === "Enter" 替代已废弃的 e.keyCode === 13，更符合现代标准；
- 增加 !e.shiftKey 判断，允许用户按 Shift+Enter 手动换行（不加符号），提升可用性；
- 严格区分「最后一行」与「历史行」，杜绝符号叠加；
- line.trim() 仅用于判断和清理末尾空格，不破坏原有缩进或内部空白。
⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 若需支持粘贴多行文本后自动格式化，需额外监听 input 或 paste 事件并做防重处理；
- 移动端软键盘 Enter 行为可能略有差异，建议结合 input 事件做兼容兜底；
- 符号 • 是 Unicode 字符（U+2022），确保页面编码为 UTF-8（HTML 中声明 <meta charset="UTF-8">）。
通过该方案，用户可自然地逐行输入：
前端开发 后端开发 UI 设计
按下三次 Enter 后，自动变为：
• 前端开发 • 后端开发 • UI 设计
结构清晰、逻辑健壮，真正满足表单场景下的专业排版需求。
