如何使用JavaScript实现HTML输入框内容的自动格式化

核心实现思路 #

• 监听输入元素的回车事件，阻止默认行为（避免textarea换行/表单自动提交）
• 对输入内容按空格分割，过滤多余连续空白产生的空项
• 按规则给每个分割后的字符串包裹单引号，用逗号拼接后追加末尾逗号
• 将处理后的内容回填到输入框或指定展示区域

完整代码示例 #

以下是开箱可用的实现代码，示例中使用textarea作为输入载体，回车后直接格式化输入内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文本格式化工具</title>
</head>
<body>
  <textarea id="inputBox" rows="5" cols="50" placeholder="输入内容，按回车格式化"></textarea>
  <script>
    const inputBox = document.getElementById('inputBox')
    inputBox.addEventListener('keydown', e => {
      // 判断是否按下回车键
      if (e.key === 'Enter') {
        // 阻止默认换行行为
        e.preventDefault()
        // 获取输入内容，去除首尾空白
        const inputContent = inputBox.value.trim()
        if (!inputContent) return
        // 按任意数量空格分割，过滤空字符串
        const wordList = inputContent.split(/\s+/).filter(item => item)
        // 按要求格式化内容
        const formattedContent = wordList.map(word => `'${word}'`).join(',') + ','
        // 回填结果到输入框，也可修改为渲染到其他展示区域
        inputBox.value = formattedContent
        // 可选：自动选中结果方便复制
        inputBox.select()
      }
    })
  </script>
</body>
</html>

扩展场景适配 #

如果需要实现每次回车追加新内容的效果（比如多次输入不同词组，每次回车都追加到格式化结果里），可以调整JS逻辑如下：

const inputBox = document.getElementById('inputBox')
// 存储已经格式化的历史内容
let formattedResult = ''
inputBox.addEventListener('keydown', e => {
  if (e.key === 'Enter') {
    e.preventDefault()
    const inputContent = inputBox.value.trim()
    if (!inputContent) return
    const wordList = inputContent.split(/\s+/).filter(item => item)
    const currentFormatted = wordList.map(word => `'${word}'`).join(',') + ','
    // 追加新格式化的内容到历史结果
    formattedResult += currentFormatted
    // 可选1：结果直接回填到输入框
    inputBox.value = formattedResult
    // 可选2：清空输入框留待下次输入，结果展示到单独元素
    // inputBox.value = ''
    // document.getElementById('resultArea').innerText = formattedResult
  }
})

内容的提问来源于stack exchange，提问作者Vee Jay Tan