本文介绍如何通过 jquery 监听输入框的键盘事件，结合单选按钮选择模式，实时完成十六进制与十进制之间的双向转换，全程无需提交表单或刷新页面。
本文介绍如何通过 jquery 监听输入框的键盘事件，结合单选按钮选择模式，实时完成十六进制与十进制之间的双向转换，全程无需提交表单或刷新页面。
在 Web 开发中，提升用户体验的关键之一是减少不必要的页面刷新。针对数值进制转换这类轻量级计算任务，完全可在前端直接完成——无需依赖 AJAX 请求后端 PHP，更无需点击按钮触发。本方案采用纯前端实时响应机制：监听 的 keyup 事件，根据当前选中的单选按钮（“十进制→十六进制”或“十六进制→十进制”），动态解析并转换输入值，即时输出到目标字段。
以下为完整可运行示例：
<meta charset="UTF-8"><title>实时进制转换器</title><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script> $(function() { $('#input').on('input', function() { // 使用 'input' 事件兼容粘贴、删除等操作 const inputValue = $(this).val().trim(); const outputField = $('#output'); if (inputValue === '') { outputField.val(''); return; } if ($('#dec').is(':checked')) { // 十进制 → 十六进制：确保输入为有效十进制整数 const decNum = parseInt(inputValue, 10); if (isNaN(decNum) || !Number.isInteger(decNum) || decNum < 0) { outputField.val('无效十进制数'); return; } outputField.val(decNum.toString(16).toUpperCase()); } else if ($('#hex').is(':checked')) { // 十六进制 → 十进制：支持带 0x 前缀或纯字母数字（如 FF、0xFF） const hexStr = inputValue.startsWith('0x') ? inputValue.substring(2) : inputValue; const decNum = parseInt(hexStr, 16); if (isNaN(decNum)) { outputField.val('无效十六进制数'); return; } outputField.val(decNum); } }); }); </script>
✅ 关键优化说明：
基于jQuery的AJAX和JSON的实例 中文WORD版
下载
本文档主要讲述的是基于jQuery的AJAX和JSON的实例；过jQuery内置的AJAX功能，直接访问后台获得JSON格式的数据，然后通过jQuer把数据绑定到事先设计好的html模板上，直接在页面上显示。有需要的朋友可以下载看看
- 使用 input 事件替代 keyup，覆盖粘贴、剪切、拖入等所有输入方式；
- 添加输入校验：空值、非法字符、负数、无效进制字符串均给出友好提示；
- 支持 0xFF 格式输入，并自动剥离前缀；
- 输出十六进制时统一转为大写（如 ff → FF），提升可读性；
- readonly 属性防止用户误编辑输出框，保障数据一致性。
⚠️ 注意事项：
- 本方案为纯前端实现，适用于常规数值转换场景；若需服务端验证、日志记录或复杂逻辑（如大数运算、自定义进制），才需引入 AJAX + PHP；
- 浏览器兼容性良好（IE9+），如需支持旧版 IE，可将 input 事件降级为 propertychange + input 组合监听；
- 生产环境建议添加防抖（debounce）以避免高频触发，尤其在长文本或性能敏感场景下。
该方案简洁高效、零服务端依赖，是轻量级实时交互的理想实践。
