如何用纯JavaScript实现Shift+Enter换行、Enter提交多行文本？

没问题，我帮你搞定这个需求！下面是完整的JavaScript实现方案，完全符合你的要求，还能完美支持多行文本的提交和显示。

完整代码实现 #

首先是HTML结构，我们用<textarea>来支持多行输入（别用<input>，它不支持多行）：

<textarea id="myText" placeholder="输入内容，Shift+Enter换行，Enter提交"></textarea>
<button id="submitBtn" style="display:none;">提交</button> <!-- 可以隐藏按钮，因为我们用Enter触发 -->
<div id="demo"></div>

然后是JavaScript逻辑，我们需要监听文本框的keydown事件来判断按键：

// 获取元素
const myText = document.getElementById('myText');
const demo = document.getElementById('demo');
const submitBtn = document.getElementById('submitBtn');

// 监听按键事件
myText.addEventListener('keydown', function(event) {
  // 判断是否按下了Enter键
  if (event.key === 'Enter') {
    if (event.shiftKey) {
      // Shift+Enter：插入换行，阻止默认行为（避免浏览器自动换行的冲突）
      event.preventDefault();
      // 获取当前光标位置，在光标处插入换行
      const start = this.selectionStart;
      const end = this.selectionEnd;
      this.value = this.value.substring(0, start) + '\n' + this.value.substring(end);
      // 光标移动到换行后的位置
      this.selectionStart = this.selectionEnd = start + 1;
    } else {
      // 单独Enter：触发提交，阻止默认行为（避免自动换行）
      event.preventDefault();
      submitText();
    }
  }
});

// 提交逻辑（也可以绑定到按钮点击）
function submitText() {
  const inputValue = myText.value.trim();
  if (!inputValue) {
    myText.focus();
    return;
  }

  // 处理多行文本的显示：用CSS让内容保留换行，或者把\n换成<br>
  const bubble = document.createElement('div');
  bubble.className = 'bubble';
  // 用textContent保留原始文本，然后通过CSS让换行生效
  bubble.textContent = inputValue;
  // 或者用innerHTML替换换行：bubble.innerHTML = inputValue.replace(/\n/g, '<br>');

  demo.appendChild(bubble);
  // 清空输入框并聚焦
  myText.value = '';
  myText.focus();
}

// 给按钮绑定点击事件（可选，方便用户点击提交）
submitBtn.addEventListener('click', submitText);

最后加一点CSS，让气泡里的多行文本正常显示：

.bubble {
  background: #e0e0e0;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 8px 0;
  white-space: pre-wrap; /* 关键：保留换行符，自动换行 */
  word-wrap: break-word;
}

关键细节解释 #

• 为什么用keydown而不是keyup？ 因为keydown能在浏览器默认行为触发前拦截，避免Enter默认的换行行为干扰我们的逻辑。
• Shift+Enter的光标处理：直接插入\n后，手动调整光标位置，让用户体验更自然，不会跳到文本末尾。
• 多行文本显示：用white-space: pre-wrap是最优雅的方式，它会保留文本中的换行符，同时自动换行过长的内容，比手动替换\n为<br>更灵活。
• 阻止默认行为：每次判断Enter后都要调用event.preventDefault()，不然浏览器会执行默认的换行操作，导致逻辑混乱。

对你现有代码的调整 #

你之前的代码片段里直接把value拼接到HTML里，会导致换行符丢失。只需要把innerHTML的拼接改成用textContent加上CSS的white-space: pre-wrap，或者把换行符替换成<br>，就能正常显示多行内容了。

比如把你原来的：

var x = '<div><p class=bubble>' + document.getElementById("myText").value + '</p></div>';

改成：

// 方式1：用textContent+CSS
const bubble = document.createElement('p');
bubble.className = 'bubble';
bubble.textContent = document.getElementById("myText").value;
// 然后把bubble加到div里再插入demo

// 方式2：替换换行符
var x = '<div><p class=bubble>' + document.getElementById("myText").value.replace(/\n/g, '<br>') + '</p></div>';

这样就能完美支持多行文本的显示啦！

内容的提问来源于stack exchange，提问作者Chris Stewart