如何禁止输入框输入印地语字符？移动端谷歌印地键盘失效问题

你之前用onkeypress的方案在桌面端有效，但移动端谷歌印地键盘失效的原因是：部分移动端输入法不会触发keypress事件，而是直接将字符注入输入框，导致基于event.key的校验失效。下面是更可靠的解决方案，覆盖输入、粘贴等所有场景：

完整实现代码 #

<input 
  type="text" 
  name="username" 
  id="username" 
  placeholder="User Name*" 
  maxlength="30" 
  pattern="[a-zA-Z ]+"
  required
>

<script>
const usernameInput = document.getElementById('username');

// 实时过滤输入内容
usernameInput.addEventListener('input', function() {
  // 只保留英文字母和空格
  this.value = this.value.replace(/[^a-zA-Z ]/g, '');
});

// 阻止粘贴非法内容
usernameInput.addEventListener('paste', function(e) {
  const pastedContent = e.clipboardData.getData('text');
  if (/[^a-zA-Z ]/.test(pastedContent)) {
    e.preventDefault();
    // 可选：提示用户
    alert('仅允许输入英文字母和空格');
  }
});
</script>

方案说明 #

1. input事件监听：每次输入框内容变化时触发，直接过滤掉所有非英文字母和空格的字符，不管输入法如何注入内容，都能确保输入框内容合法。
2. paste事件监听：防止用户通过粘贴操作输入印地语字符，一旦检测到粘贴内容包含非法字符，直接阻止粘贴行为。
3. pattern属性：作为HTML5原生的兜底校验，当用户提交表单时，浏览器会自动检查输入内容是否符合[a-zA-Z ]+规则，进一步确保数据合法性。

这个方案适配所有移动端输入法，包括谷歌印地键盘，彻底解决非法字符输入的问题。

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