求WordPress表单自定义JavaScript：首字母大写其余转小写

核心转换函数 #

先编写处理字符串格式的核心函数，满足单个单词首字母大写、其余小写的需求，也可扩展支持多单词场景：

function toTitleCase(str) {
  if (!str) return '';
  // 单个单词格式：输入"PETER" → 输出"Peter"
  return str.toLowerCase().charAt(0).toUpperCase() + str.toLowerCase().slice(1);
  
  // 若需支持多单词（如"john doe" → "John Doe"），替换上面一行为：
  // return str.toLowerCase().split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
}

绑定表单输入事件 #

将函数绑定到目标输入框的input事件，实现输入时实时格式化：

// 替换为你需要处理的表单输入框ID
const targetInput = document.getElementById('your-input-id');

if (targetInput) {
  targetInput.addEventListener('input', function() {
    this.value = toTitleCase(this.value);
  });
}

在WordPress中添加代码的方法 #

方法1：通过主题functions.php添加

将代码添加到当前主题的functions.php文件（建议使用子主题，避免主题更新导致代码丢失）：

function add_title_case_form_script() {
  ?>
  <script>
  function toTitleCase(str) {
    if (!str) return '';
    return str.toLowerCase().charAt(0).toUpperCase() + str.toLowerCase().slice(1);
  }

  // 等待DOM加载完成后执行
  document.addEventListener('DOMContentLoaded', function() {
    const targetInput = document.getElementById('your-input-id');
    if (targetInput) {
      targetInput.addEventListener('input', function() {
        this.value = toTitleCase(this.value);
      });
    }
  });
  </script>
  <?php
}
// 在页面底部加载脚本
add_action('wp_footer', 'add_title_case_form_script');

方法2：用自定义HTML模块/插件添加

若不想修改主题文件，可通过WordPress的自定义HTML模块（在「外观→小工具」中添加到页脚），或使用Code Snippets这类插件添加自定义脚本。

注意事项 #

1. 替换代码中的your-input-id为实际表单输入框的ID：打开浏览器开发者工具（F12），选中输入框即可查看其id属性。
2. 如需处理多个输入框，可使用document.querySelectorAll选择多个元素并循环绑定事件：

const inputs = document.querySelectorAll('.title-case-input');
inputs.forEach(input => {
  input.addEventListener('input', function() {
    this.value = toTitleCase(this.value);
  });
});

（需给目标输入框添加title-case-input类名）

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