网页计算器：字母b/y、俄文б/ю及逗号无法正确转换为小数点的问题求助

嘿，我仔细看了你的代码，完全懂你遇到的糟心事——明明在handlerKey里把逗号、俄文б/ю都转换成了小数点.，console.log也显示是.，但实际输入到计算器显示框里的还是逗号，导致后面的校验和计算函数全乱套了。

问题根源 #

核心问题出在键盘事件的处理逻辑上：你既没有阻止浏览器的默认输入行为，也没手动把转换后的小数点添加到显示框里。

举个具体的例子：当你按下逗号键时，handlerKey确实返回了.，但你的代码只是打印了这个值，却没告诉浏览器“别输入逗号，我要输入.”。结果就是浏览器按照默认行为把逗号塞进了显示框，你期望的.根本没被加进去，自然后续函数都不认这个逗号。

另外，你的blockSpamOperators函数逻辑也有小问题，会导致运算符的处理不符合常规计算器的交互，间接影响了整体输入流程。

修复方案 #

我给你整理了两步关键修复，按顺序改就行：

1. 重构键盘事件（keydown）的处理逻辑

我们要先阻止浏览器的默认输入，然后手动把转换后的字符添加到显示框，完全掌控输入内容。修改后的keydown事件代码如下：

displayEl.addEventListener('keydown', (e) => {
  if (e.key === ' ') e.preventDefault();
  if (displayEl.value.includes('e') || displayEl.value === 'Error') displayEl.value = '';

  const key = e.key.toLowerCase();
  const valueStr = handlerKey(key);
  
  // 跳过不需要处理的功能键
  if (['f5', 'f12'].includes(valueStr)) return;
  // 无效按键直接阻止输入
  if (valueStr === null) {
    e.preventDefault();
    return;
  }

  // 导航键（Tab、左右箭头）保留默认行为，不用改
  if (['tab', 'arrowleft', 'arrowright'].includes(valueStr)) return;
  
  // 阻止默认输入行为，彻底避免原始字符（逗号、俄文键）被输入
  e.preventDefault();

  // 单独处理删除、退格和计算操作
  if (valueStr === 'delete') {
    clear();
    return;
  }
  if (valueStr === 'backspace') {
    deleteLastCharacter();
    return;
  }
  if (valueStr === 'enter' || valueStr === '=') {
    calc();
    return;
  }

  // 开始校验是否允许添加当前字符
  let canAdd = true;

  // 校验第一个字符不能是小数点
  if (!displayEl.value && !blockFirstPoint(valueStr)) canAdd = false;
  // 校验第一个字符不能是运算符
  if (!displayEl.value && !blockFirstOperator(valueStr)) canAdd = false;
  // 校验运算符前后的小数点规则
  if (!checkPointBeforeAndAfterOperator(valueStr)) canAdd = false;
  // 校验小数点数量限制
  if (valueStr === '.' && !limitPoints(valueStr)) canAdd = false;
  // 校验运算符重复输入
  if (operators.includes(valueStr)) {
    if (!blockSpamOperators(valueStr)) canAdd = false;
  }
  // 校验零的输入规则
  if (!replaceAndLimitZero(valueStr)) canAdd = false;

  // 所有校验通过，把转换后的字符添加到显示框
  if (canAdd) {
    displayEl.value += valueStr;
  }
});

2. 修复blockSpamOperators函数逻辑

原来的函数会阻止在已有运算符的情况下输入新运算符，这不符合常规计算器的交互（应该允许替换最后一个运算符）。修改后的函数：

const blockSpamOperators = (valueStr) => {
  const currentValue = displayEl.value;
  if (!currentValue) return true; // 空输入的情况已经被blockFirstOperator处理

  const lastChar = currentValue[currentValue.length - 1];
  
  if (operators.includes(lastChar)) {
    // 替换最后一个运算符，而不是禁止输入
    displayEl.value = currentValue.slice(0, -1) + valueStr;
    return false; // 返回false，因为已经手动修改了显示框，不需要再重复添加
  }
  
  // 允许添加新的运算符
  return true;
};

为什么这样修复？ #

• 阻止默认行为后，浏览器不会再输入原始的逗号或俄文键，我们完全控制显示框里的内容。
• 手动添加转换后的.，确保显示的内容和你代码里处理的一致。
• 修复运算符处理逻辑，让计算器的交互更符合用户的使用习惯。

把这些修改加到代码里试试，应该就能解决小数点不显示的问题了！

备注：内容来源于stack exchange，提问作者TopTTeDHbIu-DeJLbFuH4uk