求助：实现输入框单词首字母大写其余小写及跨框输出功能

你之前代码的问题 #

1. 错误引用了不存在的input.content变量，你实际获取的输入值存在inputValue里，应该操作这个变量
2. 原本的keyup事件是实时修改输入框内容，不符合你现在「输入框保持原样，点击按钮输出格式化结果」的需求

完整实现代码 #

HTML部分

<input type="text" size="30" name="textfield1" id="textfield1" placeholder="输入文本..." />
<button id="formatBtn">格式化输出</button>
<textarea id="resultArea" rows="3" cols="30" placeholder="格式化结果将显示在这里..."></textarea>

JavaScript部分

// 获取页面元素
const inputField = document.getElementById('textfield1');
const formatBtn = document.getElementById('formatBtn');
const resultArea = document.getElementById('resultArea');

// 单个单词首字母大写处理函数
function capitalizeWord(word) {
  if (!word) return '';
  return word[0].toUpperCase() + word.slice(1).toLowerCase();
}

// 多单词整体格式化函数
function capitalizeEachWord(str) {
  // 按任意数量空格分割文本，过滤空字符串后逐个处理单词
  return str.split(/\s+/).filter(word => word).map(capitalizeWord).join(' ');
}

// 绑定按钮点击事件
formatBtn.addEventListener('click', () => {
  const inputValue = inputField.value.trim();
  // 空输入时清空结果框
  if (!inputValue) {
    resultArea.value = '';
    return;
  }
  // 格式化后将结果写入textarea
  resultArea.value = capitalizeEachWord(inputValue);
});

关键逻辑说明 #

• split(/\s+/)：用正则匹配任意数量的空格分割文本，避免连续空格生成无效空单词
• filter(word => word)：过滤分割后产生的空字符串，防止处理空内容时出现报错
• 事件绑定到按钮的click事件，确保输入框内容保持原样，仅在点击后输出格式化结果
• 拆分出单独的单词处理函数，让逻辑更清晰，也方便后续复用

比如输入heLlo OuT thERe!，点击按钮后textarea会输出Hello Out There!，完全符合需求。

内容的提问来源于stack exchange，提问作者Amy Barnett