Keypress/keyup函数未输出目标console.log且非法字符过滤失效问题
2026-5-15
解决你的计算器键盘输入问题
看起来你的代码遇到了几个典型的前端事件绑定和资源冲突问题，我帮你梳理一下原因和修复方案：
问题根源分析
- 重复引入jQuery：页面里加载了两个不同版本的jQuery（2.1.1和3.2.1），这会导致jQuery核心对象被覆盖，事件绑定、DOM操作都会出现不可预期的问题，这是行为不稳定的主要原因之一。
- 重复的事件监听代码：你写了两段几乎完全一样的键盘事件监听逻辑（一段用
keypress，一段用keyup），这会让同一个按键触发两次处理逻辑，而且两个逻辑里的infix变量是各自独立的，导致你看到的控制台输出混乱。 keypress事件的兼容性问题：keypress事件已经被标记为废弃，而且它对某些按键的e.key返回值可能不符合预期，比如数字键在某些输入法状态下的表现。
修复后的完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Calculator</title> <!-- 只保留一个jQuery版本 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <style> body { background-color: #000000; } .container { width: 420px; height: 500px; background-color: #c8c8c8; } .btn-group { margin: 5px; } .btn.btn-primary { width: 59px; height: 34px; } #title { background-color: #c8c8c8; } #screen { width: 300px; height: 35px; border-radius: 15px; margin: 5px 0px 10px 0px; color:black; font-size: 15px; text-align:right; padding-bottom:0; font-family: helvetica; } </style> <script> $(document).ready(function () { // 声明全局的输入字符串 let infix = ""; // 键盘输入处理逻辑 $(window).on("keyup", function(e) { // 只允许0-9的数字按键 const validKeys = "0123456789"; if(validKeys.includes(e.key)) { infix += e.key; console.log("当前infix内容:", infix); // 同步更新输入框显示 $("#screen").val(infix); } else { console.log("非法按键，已忽略:", e.key); } }); // 清除按钮逻辑 $("#clear").on("click", function() { infix = ""; $("#screen").val(""); console.log("已清除输入"); }); }); </script> </head> <body> <div class="container"> <div class="row text-center"> <div id="title" class="col-md-12 text-center"> <h4>Business Analyst</h4> </div> <div class="col-md-12 body text-center"> <input id="screen" type=text> </div> <div class="col-md-12 body text-center"> <div class="btn-group"> <button id="enter" class="btn btn-primary">Enter</button> </div> <div class="btn-group"> <button id="compute" class="btn btn-primary">CPT</button> </div> <div class="btn-group"> <button id="clear-cash-flow" class="btn btn-primary">CCF</button> </div> <div class="btn-group"> <button id="analyst-mode" class="btn btn-primary">AM</button> </div> </div> <div class="col-md-12 body text-center"> <div class="btn-group"> <button id="fut-val" class="btn btn-primary">FV</button> </div> <div class="btn-group"> <button id="cash-flow" class="btn btn-primary">CF</button> </div> <div class="btn-group"> <button id="net-pv" class="btn btn-primary">NPV</button> </div> <div class="btn-group"> <button id="irr" class="btn btn-primary">IRR</button> </div> </div> <div class="col-md-12 body text-center"> <div class="btn-group"> <button id="period" class="btn btn-primary">N</button> </div> <div class="btn-group"> <button id="int-rate" class="btn btn-primary">I|Y</button> </div> <div class="btn-group"> <button id="pres-val" class="btn btn-primary">PV</button> </div> <div class="btn-group"> <button id="payment" class="btn btn-primary">PMT</button> </div> </div> <div class="col-md-12 body text-center"> <div class="btn-group"> <button id="clear" class="btn btn-primary">C</button> </div> <div class="btn-group"> <button id="percent" class="btn btn-primary">%</button> </div> <div class="btn-group"> <button id="lftparen" class="btn btn-primary">(</button> </div> <div class="btn-group"> <button id="rtparen" class="btn btn-primary">)</button> </div> </div> <div class="col-md-12 body text-center"> <div class="btn-group"> <button id="seven" class="btn btn-primary">7</button> </div> <div class="btn-group"> <button id="eight" class="btn btn-primary">8</button> </div> <div class="btn-group"> <button id="nine" class="btn btn-primary">9</button> </div> <div class="btn-group"> <button id="division" class="btn btn-primary"><span>÷</span></button> </div> </div> <div class="col-md-12 body text-center"> <div class="btn-group"> <button id="four" class="btn btn-primary">4</button> </div> <div class="btn-group"> <button id="five" class="btn btn-primary">5</button> </div> <div class="btn-group"> <button id="six" class="btn btn-primary">6</button> </div> <div class="btn-group"> <button id="multiplication" class="btn btn-primary">X</button> <!-- 修复重复的id --> </div> </div> <div class="col-md-12 body text-center"> <div class="btn-group"> <button id="one" class="btn btn-primary">1</button> </div> <div class="btn-group"> <button id="two" class="btn btn-primary">2</button> </div> <div class="btn-group"> <button id="three" class="btn btn-primary">3</button> </div> <div class="btn-group"> <button id="subtraction" class="btn btn-primary">-</button> </div> </div> <div class="col-md-12 body text-center"> <div class="btn-group"> <button id="zero" class="btn btn-primary">0</button> </div> <div class="btn-group"> <button id="decimal" class="btn btn-primary">.</button> </div> <div class="btn-group"> <button id="equal" class="btn btn-primary">=</button> </div> <div class="btn-group"> <button id="addition" class="btn btn-primary">+</button> </div> </div> </div> </div> </body> </html>
关键修改点说明
- 移除重复的jQuery引入：只保留了3.2.1版本，避免版本冲突导致的异常。
- 删除冗余的事件代码：只保留了一段
keyup事件监听，确保逻辑唯一，不会出现重复触发的情况。 - 优化按键判断：明确
validKeys变量，让判断逻辑更清晰，同时严格只允许0-9的数字按键被记录。 - 同步输入框显示：每次输入数字后，把
infix的内容同步到#screen输入框，让用户能直观看到输入内容。 - 修复重复ID问题：原来的乘法按钮和除法按钮都用了
id="division"，这是无效的HTML，改成了id="multiplication"。 - 添加清除按钮逻辑：补充了清除按钮的点击事件，方便测试和使用。
- 优化控制台输出：把模糊的
console.log("infix" + e.key)改成了更清晰的console.log("当前infix内容:", infix)，同时增加了非法按键的提示，方便调试。
现在你可以测试这个修复后的代码，应该能正常捕获数字按键，控制台会输出正确的infix内容，非法按键也会被正确忽略，不会被记录。
内容的提问来源于stack exchange，提问作者Ryan
相关产品推荐
相关产品推荐
