求助：WordPress表单中City字段仅允许输入字母的实现方案

方法1：HTML原生验证（无需额外JS） #

直接给City输入框添加pattern属性，结合正则实现提交前验证，同时可添加提示文本：

<div class="mc-address-fields-group">
  <div class="mc-field-group">
    <label for="mce-ADDRESS-city">City</label>
    <input type="text" maxlength="40" name="CITY" id="mce-ADDRESS-city" class="required" required pattern="[A-Za-z\s]+" title="仅允许输入字母和空格">
  </div>
  <div class="mc-field-group">
    <label for="mce-ADDRESS-zip">Zip Code</label>
    <input type="number" onKeyDown="if(this.value.length==4 && event.keyCode!=8) return false;" name="ZIP" id="mce-ADDRESS-zip" class="required" required>
  </div>
</div>

• 说明：[A-Za-z\s]+ 允许大小写字母和空格（适配带空格的城市名，如"Los Angeles"），不需要空格可去掉\s；提交表单时浏览器会自动校验，不符合规则则阻止提交并显示title中的提示。

方法2：JavaScript实时拦截（两种实现） #

如果需要实时阻止非法输入（而非仅提交时验证），可使用以下两种方案：

非正则版本（通过按键白名单判断） #

监听按键事件，只允许指定的合法按键：

document.getElementById('mce-ADDRESS-city').addEventListener('keydown', function(e) {
  const allowedKeys = [
    'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
    'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z',
    ' ', 'Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'
  ];
  if (!allowedKeys.includes(e.key)) {
    e.preventDefault();
  }
});

• 说明：直接通过白名单限制按键，无需正则，同时保留了退格、方向键等必要操作键。

正则版本（实时过滤输入内容） #

监听输入事件，自动过滤掉非字母的字符（包括粘贴的内容）：

document.getElementById('mce-ADDRESS-city').addEventListener('input', function(e) {
  // 仅保留字母和空格，其余字符替换为空
  this.value = this.value.replace(/[^A-Za-z\s]/g, '');
});

• 说明：无论用户是键盘输入还是粘贴内容，都会自动清理非法字符，体验更流畅。

WordPress环境注意事项 #

1. 避免直接在HTML中写内联脚本，建议将JS代码添加到主题的functions.php（通过wp_enqueue_script或wp_add_inline_script），或使用WordPress后台「外观→自定义→额外JS」（若主题支持）。
2. 测试时可暂时禁用其他插件，排查是否存在JS冲突问题。

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