限制输入最多2个词（支持含连字符的词）的JS代码问题排查

你的核心问题是原代码把连字符当成了词的分隔符，导致带连字符的词被错误拆分。我们需要调整正则表达式，只把空白字符作为词的分隔依据，同时处理首尾空格的情况，这样就能正确识别带连字符的词啦。

修改后的代码 #

$(function(){
  var maxWords = 2;
  jQuery('#fullname').on('keypress input', function(e) {
    var $this = $(this);
    // 分割规则：先去掉首尾空格，再以一个或多个空白字符分隔
    var words = $this.val().trim().split(/\s+/);
    var wordCount = words.length;

    // 如果词数超过限制，仅允许控制键（退格、删除、方向键等）
    if (wordCount >= maxWords) {
      var allowedKeys = [8, 46, 37, 39, 9]; // 退格、删除、左右箭头、Tab
      if (!allowedKeys.includes(e.keyCode)) {
        e.preventDefault();
      }
    }
  });
});

关键逻辑说明 #

• 覆盖更多输入场景：用on('keypress input')同时监听键盘输入和粘贴操作，避免用户通过粘贴绕过限制；
• 正确的词分割：
  • trim()先清除内容首尾的空格，防止空字符串被误算成词；
  • split(/\s+/)仅以连续空白字符作为分隔符，这样带连字符的Mike-David会被完整识别为单个词；
• 人性化限制：达到词数上限时，不禁止退格、删除等控制键，避免用户无法修改内容。

测试验证 #

• 允许的输入：Mike-David Smith → 分割后得到["Mike-David", "Smith"]，词数为2，可正常输入；
• 禁止的输入：Mike David Smith → 分割后得到["Mike", "David", "Smith"]，词数为3，后续输入会被阻止。

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