jQuery实现句子首字母大写功能时输入内容被错误替换如何解决

问题原因 #

• 变量取值时机错误：title、sentenceCaseTitle两个变量在脚本初始化阶段就执行取值，此时输入框无用户输入内容，所以取值永远是空字符串
• 事件绑定缺失：没有给输入框绑定用户操作对应的触发事件，转换逻辑无法在用户输入、粘贴时自动执行
• 逻辑顺序错误：sentencecase函数中先触发change paste事件再赋值的逻辑颠倒，还会触发事件死循环

修复后代码 #

function capitalizeFirstLetter(string) {
  // 空值直接返回避免调用方法报错
  if (!string) return ''
  return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase()
}

// 给输入框绑定所有内容变更场景对应的事件
$('#essay-title').on('input paste change', function() {
  // 每次触发事件时实时获取输入框最新值
  const currentValue = $(this).val()
  const convertedValue = capitalizeFirstLetter(currentValue)
  // 比对转换前后的值，只有不一致时才赋值，避免重复触发input事件导致死循环
  if (currentValue !== convertedValue) {
    $(this).val(convertedValue)
  }
})

效果说明 #

• 覆盖手动输入、粘贴、拖拽替换等所有输入框内容变更场景
• 实时转换不会再出现返回空文本的问题
• 增加空值校验逻辑，避免空输入时调用字符串方法报错
• 自动将除首字母外的其余字符统一转为小写，符合句子首字母大写的常规规则

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