如何在单个输入框内实现数学表达式实时计算并修复现有逻辑缺陷

问题根因 #

当前代码绑定了keyup事件，每一次按键松开都会立即执行eval计算输入框内容，此时数学表达式还未输入完成，就会提前得到不完整的计算结果，后续输入的字符会直接拼接在错误结果后面，自然得不到正确值。

修复方案 #

你可以调整计算的触发时机，避免输入过程中频繁触发运算，以下是两种常用的可行方案：

方案1：输入框失焦时自动计算 #

用户输入完表达式，点击输入框外的区域时才执行计算，同时添加异常捕获避免非法表达式报错：

<input type="text" name="input" size="16" id="answer" onblur="try { this.value = eval(this.value) } catch(err) {}">

方案2：按下回车键时计算 #

符合常规计算器的使用逻辑，用户输完表达式按回车才出结果：

<input type="text" name="input" size="16" id="answer" onkeyup="if(event.key === 'Enter') { try { this.value = eval(this.value) } catch(err) {} }">

注意事项 #

如果你的页面是对外公开使用的场景，eval存在XSS注入风险，建议替换为更安全的四则运算解析逻辑，避免被恶意注入代码执行。

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