求助：JS实现输入框特定规则的大小写实时控制

嘿，我来帮你搞定这个文本大小写控制的需求！先把你的规则再理一遍，确保没理解错：

• 整个字符串的首字符必须大写
• 空格或连字符后面的单词首字符，你可以自由选大写或小写
• 除此之外的所有字符，必须强制小写

你的思路用split处理是可行的，但逐个字符遍历的方式会更灵活，还能避免光标跳来跳去的问题。直接给你可以用的代码，我会一步步解释：

$('#name').on('input change', function() {
  const inputVal = $(this).val();
  if (!inputVal) return; // 空输入直接返回，不用处理

  // 拆分字符逐个处理
  const processedVal = inputVal.split('').map((char, index) => {
    if (index === 0) {
      // 第一个字符强制转大写
      return char.toUpperCase();
    }
    const prevChar = inputVal[index - 1];
    if (prevChar === ' ' || prevChar === '-') {
      // 空格/连字符后的首字符，保留用户输入的大小写
      return char;
    }
    // 其他所有字符强制转小写
    return char.toLowerCase();
  }).join('');

  // 处理光标位置，避免输入时光标跳到末尾
  const cursorPos = this.selectionStart;
  $(this).val(processedVal);
  this.setSelectionRange(cursorPos, cursorPos);
});

代码解释 #

1. 监听事件：同时监听input和change事件，确保用户输入、粘贴或者修改内容时都能触发处理
2. 空值判断：如果输入框是空的，直接跳过处理，避免不必要的计算
3. 字符遍历处理：
   • 第一个字符不管用户输入什么，都转成大写
   • 如果当前字符的前一个是空格或连字符，就保留用户输入的大小写（比如你输入-father，可以选择-Father或者-father）
   • 剩下的所有字符，强制转成小写，确保符合规则
4. 光标修复：处理完文本后把光标放回原来的位置，不会打断用户的输入节奏

效果示例 #

• 输入grand-father is nice → 处理后：Grand-father is nice
• 输入GRAND-FATHER IS NICE → 处理后：Grand-Father is nice
• 输入grand-Father IS nice → 处理后：Grand-Father is nice
• 输入gRand-fAthEr iS NiCe → 处理后：Grand-fAthEr is NiCe（这里-f后的A和空格后的N保留了你输入的大写，其他字符自动转小写）

这个方案完全符合你的需求，直接替换你现有的代码部分就可以用啦！

内容的提问来源于stack exchange，提问作者François