如何用原生JavaScript实现姓名（名+姓）输入掩码功能？

没问题！我来帮你把那段手机号掩码代码改成适合姓名输入的版本，还会拆解清楚每部分的作用，让你能明白逻辑～

完整实现代码 #

首先直接给你能用的代码，包含HTML和JavaScript：

<input type="text" id="nameInput" placeholder="John Doe"/>

document.getElementById('nameInput').addEventListener('input', function(e) {
  // 1. 过滤非法字符：只保留大小写字母和空格，同时把多空格合并成单个
  let cleanedValue = e.target.value
    .replace(/[^a-zA-Z\s]/g, '') // 移除所有非字母、非空格的字符
    .replace(/\s+/g, ' ')        // 把连续多个空格换成单个空格
    .trim();                     // 去掉首尾的空格

  // 2. 分割成名和姓两部分，确保只保留一个分隔空格
  let nameParts = cleanedValue.split(' ');
  if (nameParts.length > 1) {
    // 如果已经输入了空格，把第一部分作为名，剩下的所有内容合并为姓
    e.target.value = `${nameParts[0]} ${nameParts.slice(1).join('')}`;
  } else {
    // 还没输入空格，直接显示输入的字母
    e.target.value = nameParts[0] || '';
  }
});

代码逻辑拆解 #

我给你一步步解释这段代码是怎么工作的，帮你理解正则和处理逻辑：

1. 非法字符过滤

   • replace(/[^a-zA-Z\s]/g, '')：这个正则里的[^a-zA-Z\s]表示“匹配所有不是大小写字母（a-zA-Z）也不是空格（\s）的字符”，g表示全局匹配，把所有这类字符都删掉，确保输入里只有字母和空格。
   • replace(/\s+/g, ' ')：\s+表示“一个或多个连续的空格”，把它们替换成单个空格，避免用户输入多个空格的情况。
   • .trim()：去掉字符串开头和结尾的空格，防止用户在姓名前后输入无效空格。

2. 姓名分割处理

   • 用split(' ')把处理后的字符串按空格分割成数组，如果用户还没输入空格，数组就只有一个元素（就是正在输入的名字）；如果已经输入了空格，数组会有多个元素（但因为我们已经把多空格合并成一个，所以最多是“名”和“姓”两部分）。
   • 当数组长度大于1时，我们把第一部分作为名字，剩下的所有内容合并成姓氏，用单个空格分隔，这样不管用户在姓的部分输入多少字母，都会正常显示。

额外说明 #

这个实现完全符合你的要求：

• 只允许输入大小写字母，其他字符会被自动过滤掉
• 强制用单个空格分隔名和姓，不会出现多空格的情况
• 名和姓可以是任意长度，没有字符数限制

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