数学游戏开发：如何让正负号紧邻数字并校验输入合法性

嘿，我刚巧做过类似的数学表达式输入功能，来给你捋捋怎么解决这两个问题——让正负号紧挨着数字，同时杜绝像--8-88这种无效输入，重点就在那个minus按钮的处理上！

一、让正负号紧邻数字的核心逻辑 #

正负号本质是数字的前缀符号（而非独立减法运算符时），所以我们要控制它只能出现在两种合法位置：

• 输入框的最开头（比如-8）
• 任何运算符（+、×、÷等）或者左括号的后面（比如3 + (-5)、×-8）

这样就能保证负号后面必然跟着数字，实现“紧邻”的效果。

二、针对Minus按钮的点击校验 #

直接给minus按钮绑定点击事件，每次点击前先检查当前输入的状态，再决定是否添加负号：

const mathInput = document.getElementById('math-input');
const minusBtn = document.getElementById('minus-btn');

minusBtn.addEventListener('click', () => {
  const currentText = mathInput.value.trim();
  const lastChar = currentText[currentText.length - 1];
  
  // 定义允许放置负号的前置字符：空、运算符、左括号
  const validPrefixes = ['', '+', '-', '×', '÷', '('];
  
  // 情况1：输入为空，直接加负号
  if (currentText === '') {
    mathInput.value += '-';
    return;
  }
  
  // 情况2：最后一个字符是合法前缀，且不是已经是负号（避免连续--）
  if (validPrefixes.includes(lastChar)) {
    if (lastChar !== '-') {
      mathInput.value += '-';
    }
    return;
  }
  
  // 情况3：最后一个字符是数字/小数点，这时候不允许直接加负号
  // 可以根据游戏需求弹出提示，或者自动补全运算符（比如"88"变成"88+-"不推荐）
  alert('请先输入运算符，再添加负号哦');
});

三、全局输入校验（防止手动输入无效内容） #

除了按钮点击，还要处理用户手动键盘输入的情况，监听输入框的input事件，实时修正无效内容：

mathInput.addEventListener('input', () => {
  let inputValue = mathInput.value;
  
  // 1. 替换连续的符号（比如"--"、"-+"）为单个合法符号
  // 规则：连续符号只保留最后一个，开头的连续负号仅保留一个
  inputValue = inputValue.replace(/([+\-×÷]){2,}/g, (match) => {
    if (match.startsWith('-') && mathInput.selectionStart <= match.length) {
      return '-';
    }
    return match[match.length - 1];
  });
  
  // 2. 禁止数字后面直接跟多个符号（比如"8--8"变成"8-8"）
  inputValue = inputValue.replace(/(\d)([+\-×÷]){2,}/g, (_, num, ops) => {
    return num + ops[ops.length - 1];
  });
  
  mathInput.value = inputValue;
});

四、额外优化（可选） #

如果你的游戏支持括号运算，当用户在数字后面点击负号时，可以自动插入括号，比如3变成3+(-)，这样负号后面就能直接跟数字，更符合数学表达式规范。

这样处理后，既能保证正负号始终紧邻数字，又能彻底杜绝--8-88这类无效输入啦！

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