JS计算器输入超出显示区域：如何实现输入长度限制？

要实现显示区域满额时停止接收新输入，核心是每次输入前检查内容是否超出显示容器范围，若超出则拒绝新输入。以下是具体修改方案：

关键修改逻辑 #

1. 新增辅助函数判断内容溢出：利用元素的scrollWidth（内容实际宽度）和clientWidth（容器可视宽度）对比，判断内容是否超出显示区域。
2. 在输入函数中先模拟添加新内容后的状态，确认不溢出再更新真实内容，避免误判或内容闪烁。

修改后的完整JavaScript代码 #

// 绑定按钮点击事件
const digit0 = document.getElementById("digit0");
digit0.addEventListener("click", input);
const digit1 = document.getElementById("digit1");
digit1.addEventListener("click", input);
const digit2 = document.getElementById("digit2");
digit2.addEventListener("click", input);
const digit3 = document.getElementById("digit3");
digit3.addEventListener("click", input);
const digit4 = document.getElementById("digit4");
digit4.addEventListener("click", input);
const digit5 = document.getElementById("digit5");
digit5.addEventListener("click", input);
const digit6 = document.getElementById("digit6");
digit6.addEventListener("click", input);
const digit7 = document.getElementById("digit7");
digit7.addEventListener("click", input);
const digit8 = document.getElementById("digit8");
digit8.addEventListener("click", input);
const digit9 = document.getElementById("digit9");
digit9.addEventListener("click", input);
const digitPlus = document.getElementById("digitPlus");
digitPlus.addEventListener("click", input);
const digitMinus = document.getElementById("digitMinus");
digitMinus.addEventListener("click", input);
const digitMultiply = document.getElementById("digitMultiply");
digitMultiply.addEventListener("click", input);
const digitDivision = document.getElementById("digitDivision");
digitDivision.addEventListener("click", input);
const decimalBtn = document.getElementById("decimalBtn");
decimalBtn.addEventListener("click", input);

// 绑定键盘事件
document.addEventListener("keydown", (e) => {
  if (e.code === "NumpadEnter" || e.code === "Enter") {
    calculate();
  } else if (e.code === "Backspace") {
    del();
  } else if (e.code === "Delete") {
    reset();
  } else {
    input(e);
  }
});

// 绑定功能按钮事件
const digitEquals = document.getElementById("digitEquals");
digitEquals.addEventListener("click", calculate);
const resetBtn = document.getElementById("resetBtn");
resetBtn.addEventListener("click", reset);
const clearBtn = document.getElementById("clearBtn");
clearBtn.addEventListener("click", del);
const display = document.getElementById("display");
let displayCurrentResult = "";

// 检查内容是否会溢出显示容器
function isDisplayOverflow(newContent) {
  const originalText = display.innerText;
  display.innerText = commaSeparator(newContent);
  const isOverflow = display.scrollWidth > display.clientWidth;
  display.innerText = originalText;
  return isOverflow;
}

// 输入处理函数
function input(e) {
  let inputValue = "";

  if (e.type === "click") {
    inputValue = e.target.innerText;
  } else {
    switch(e.key) {
      case "0": inputValue = "0"; break;
      case "1": inputValue = "1"; break;
      case "2": inputValue = "2"; break;
      case "3": inputValue = "3"; break;
      case "4": inputValue = "4"; break;
      case "5": inputValue = "5"; break;
      case "6": inputValue = "6"; break;
      case "7": inputValue = "7"; break;
      case "8": inputValue = "8"; break;
      case "9": inputValue = "9"; break;
      case "+": inputValue = "+"; break;
      case "-": inputValue = "-"; break;
      case "*": inputValue = "*"; break;
      case "/": inputValue = "/"; break;
      case "=": inputValue = "="; break;
      case ".": inputValue = "."; break;
      default: return;
    }
  }

  // 计算添加新输入后的临时内容
  let tempContent = displayCurrentResult;
  const lastChar = displayCurrentResult.slice(-1);
  const isOperator = ["*", "/", "-", "+"].includes(lastChar);
  const isInputOperator = ["*", "/", "-", "+"].includes(inputValue);
  
  if (isOperator && isInputOperator) {
    tempContent = tempContent.slice(0, -1) + inputValue;
  } else {
    tempContent += inputValue;
  }

  // 检查不溢出才更新内容
  if (!isDisplayOverflow(tempContent)) {
    displayCurrentResult = tempContent;
    display.innerText = commaSeparator(displayCurrentResult);
  }
}

// 计算结果函数
function calculate() {
  try {
    const result = eval(displayCurrentResult);
    display.innerText = commaSeparator(result);
    displayCurrentResult = result.toString();
  } catch (err) {
    display.innerText = "Error";
    displayCurrentResult = "";
  }
}

// 重置函数
function reset() {
  displayCurrentResult = "";
  display.innerText = commaSeparator(displayCurrentResult);
}

// 删除最后一位函数
function del() {
  displayCurrentResult = displayCurrentResult.slice(0, -1);
  display.innerText = commaSeparator(displayCurrentResult);
}

// 千分位分隔函数
function commaSeparator(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

额外优化说明 #

• 将原键盘输入的多分支if-else改为switch，代码更简洁易维护。
• 给计算函数添加了错误捕获，避免非法表达式导致的控制台报错。
• 原CSS和HTML代码无需修改，直接配合上述JS即可实现需求。

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