本文介绍如何利用 jquery 监听输入框事件，结合原生 javascript 进制转换逻辑，在用户键入时实时完成十进制 ↔ 十六进制双向转换，全程无页面刷新、无需提交按钮。
本文介绍如何利用 jquery 监听输入框事件，结合原生 javascript 进制转换逻辑，在用户键入时实时完成十进制 ↔ 十六进制双向转换，全程无页面刷新、无需提交按钮。
要实现“输入即响应”的进制转换（如输入 12 自动显示 c，输入 ff 自动显示 255），关键在于脱离传统表单提交流程，改用前端实时监听 + 原生转换逻辑，而非依赖 AJAX 请求后端 PHP —— 实际上，本场景完全可在浏览器端高效完成，无需服务端参与。
✅ 核心思路
- 使用 keyup 事件监听输入框内容变化；
- 根据选中的单选按钮（#dec 或 #hex）判断转换方向；
- 调用 JavaScript 内置方法 parseInt() 和 .toString(16) 完成双向转换；
- 将结果直接写入输出框，零延迟、零请求、零刷新。
? 完整可运行示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实时进制转换器</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form id="myForm">
<div>
<label>输入值：</label>
<input type="text" id="input" value="" placeholder="请输入数字（十进制或十六进制）" />
</div>
<div>
<input type="radio" name="select" id="dec" value="decToHex" checked />
<label for="dec">十进制 → 十六进制</label>
</div>
<div>
<input type="radio" name="select" id="hex" value="hexToDec" />
<label for="hex">十六进制 → 十进制</label>
</div>
<div>
<label>转换结果：</label>
<input type="text" id="output" value="" readonly />
</div>
</form>
<script>
$(function() {
$('#input').on('input', function() { // 推荐使用 'input' 而非 'keyup'，兼容粘贴、删除等操作
const inputVal = $(this).val().trim();
const $output = $('#output');
if (!inputVal) {
$output.val('');
return;
}
if ($('#dec').is(':checked')) {
// 十进制 → 十六进制：先转数字，再转小写十六进制字符串
const num = parseInt(inputVal, 10);
$output.val(isNaN(num) ? '无效十进制' : num.toString(16).toLowerCase());
} else if ($('#hex').is(':checked')) {
// 十六进制 → 十进制：支持 0x 前缀或纯 hex 字符（如 "ff", "FF", "0xFF"）
const num = parseInt(inputVal, 16);
$output.val(isNaN(num) ? '无效十六进制' : num);
}
});
});
</script>
</body>
</html>⚠️ 注意事项与优化点
- 事件选择：使用 'input' 事件比 'keyup' 更健壮，能捕获粘贴（Ctrl+V）、剪切、拖拽输入及移动端软键盘输入；
- 输入校验：parseInt() 对非法字符自动截断（如 "12abc" → 12），建议添加 isNaN() 判断并给出友好提示；
- 大小写处理：.toString(16) 默认返回小写字母，符合常规显示习惯；若需大写，可用 .toUpperCase()；
- 前缀兼容：parseInt("0xFF", 16) 和 parseInt("ff", 16) 均可正确解析，无需额外预处理；
- 性能无忧：所有运算在毫秒级完成，无需防抖（debounce），但高频输入下仍建议保留 trim() 和空值判断。
? 扩展提示：若后续需对接 PHP 后端（例如验证合法性、记录日志或调用复杂算法），可将上述逻辑改为 $.post() 请求，但本例中纯前端方案更轻量、更快、更可靠 —— 能用 JS 解决的，就不必增加 HTTP 开销。
该方案简洁、稳定、开箱即用，是现代 Web 表单交互的理想实践。
