本文介绍如何通过 html 文本输入框获取用户输入的房屋编号，并利用 javascript 动态查找并高亮对应 id 的 svg 元素，避免为每个房屋编写重复函数，提升代码可维护性与响应效率。
本文介绍如何通过 html 文本输入框获取用户输入的房屋编号，并利用 javascript 动态查找并高亮对应 id 的 svg 元素，避免为每个房屋编写重复函数，提升代码可维护性与响应效率。
在实际应急场景（如社区急救调度）中，快速定位无序编号的房屋至关重要。你无需为每个房屋硬编码按钮和函数——只需一个输入框 + 一行核心逻辑，即可实现“输入即高亮”。其本质是：将用户输入作为字符串，动态传入 getElementById()，再操作 DOM 样式。
以下是最简可行、易理解且生产就绪的实现方案（兼容所有现代浏览器，无需 Web Components 基础）：
✅ 推荐方案：纯 JS + 输入事件监听（简洁可靠）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>房屋地图高亮工具</title>
<style>
.default { fill: #008000; stroke: #000000; stroke-width: 3; }
.selected { fill: #ff0000; stroke: #ff6600; stroke-width: 4; }
text { font-family: Arial, sans-serif; font-size: 24px; dominant-baseline: middle; text-anchor: middle; }
</style>
</head>
<body>
<label for="houseInput">请输入房屋编号：</label>
<input type="text" id="houseInput" placeholder="例如：01、3、22a" style="font-size: 16px; padding: 4px; margin: 10px 0;">
<svg width="500" height="500" viewBox="0 0 500 500">
<!-- 房屋元素 ID 必须与用户可能输入的格式完全一致（如 "01", "3", "22a"） -->
<g><circle class="default" id="01" cx="380" cy="400" r="40"/><text x="380" y="400">1</text></g>
<g><circle class="default" id="02" cx="380" cy="60" r="40"/><text x="380" y="60">2</text></g>
<g><circle class="default" id="03" cx="80" cy="240" r="40"/><text x="80" y="240">3</text></g>
<g><circle class="default" id="04" cx="430" cy="210" r="40"/><text x="430" y="210">4</text></g>
<g><circle class="default" id="05" cx="110" cy="60" r="40"/><text x="110" y="60">5</text></g>
<g><circle class="default" id="06" cx="230" cy="130" r="40"/><text x="230" y="130">6</text></g>
<g><circle class="default" id="07" cx="130" cy="370" r="40"/><text x="130" y="370">7</text></g>
<g><circle class="default" id="08" cx="280" cy="280" r="40"/><text x="280" y="280">8</text></g>
</svg>
<script>
const input = document.getElementById('houseInput');
const svg = document.querySelector('svg');
// 监听输入变化（支持实时反馈，含退格）
input.addEventListener('input', function() {
const value = this.value.trim();
// 清除之前所有高亮
document.querySelectorAll('.selected').forEach(el => {
el.classList.remove('selected');
el.classList.add('default');
});
// 若有输入，尝试查找对应 ID 的元素
if (value) {
const target = document.getElementById(value);
if (target) {
target.classList.remove('default');
target.classList.add('selected');
}
}
});
</script>
</body>
</html>? 关键说明与注意事项：
- ID 匹配必须精确：getElementById("01") 只匹配 <circle id="01">，不匹配 "1" 或 "1a"。请确保 SVG 中 id 属性与用户习惯输入完全一致（建议统一补零如 "01"，或接受 "1" → 可扩展为 id="01" data-display="1" 并用 querySelector 模糊匹配）。
- 使用 input 事件而非 keyup：它能捕获粘贴、语音输入、自动填充等所有变更，体验更鲁棒。
- 样式切换推荐用 classList：比直接修改 style.fill 更利于维护，也方便后续添加动画（如 transition: fill 0.2s）。
- 性能无忧：即使上百个房屋，DOM 查询仍是毫秒级；无需防抖（除非需对接后端校验）。
- 无障碍友好：为 <input> 添加 <label>，并设置 aria-label 可进一步提升可访问性。
? 进阶提示（可选）：
- 若房屋 ID 含字母/符号（如 "22a"），确保 HTML ID 合法（SVG 中合法，但避免以数字开头的纯数字 ID 在旧 IE 中潜在问题）；
- 可增加「未找到」提示：if (!target) console.warn(未找到房屋：${value});；
- 结合 focus() 和 select() 让输入框获得焦点并全选，提升操作流。
这套方案将原始 8 个冗余函数压缩为 10 行核心逻辑，真正实现“一次编写，终身维护”，让急救人员把时间留给生命，而不是调试代码。
