纯HTML无法可靠校验IPv4数值范围，需结合pattern做基础格式约束（如pattern="^((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\.){3}(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)$"）并用JS在input事件中实时过滤非法字符、截断超长段、修正越界值（如>255→255），同时注意光标管理与移动端inputmode优化。
怎么用原生 HTML 实现 IP 地址输入校验
纯 HTML 无法真正校验 IPv4 地址的数值范围（比如 256.1.1.1 是非法的），type="text" 加 pattern 只能做基础格式匹配，且正则稍有不慎就会漏判或误判。浏览器原生不支持 type="ip-address" 这类语义化类型，所以必须配合 JS 才能可靠拦截非法值。
-
pattern可以防止明显错误（如字母、多余点），但无法阻止999.999.999.999 - 用户粘贴、拖拽、自动填充时，
pattern不触发，oninput或onblur才是关键时机 - 移动端软键盘不会因
pattern自动切数字键盘，想优化体验得加inputmode="numeric"并配合pattern="[0-9.]*"
IPv4 输入框的最小可用正则与 pattern 设置
别用网上那些“完美匹配 0–255”的超长正则——它会让 pattern 在表单提交时行为不可控，且不支持实时反馈。实际只需约束结构，把数值校验交给 JS：
<input
type="text"
pattern="^((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\.){3}(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)$"
title="请输入合法 IPv4 地址（如 192.168.1.1）"
inputmode="numeric"
>
- 这个
pattern能覆盖绝大多数常见错误，但注意：它会在整个输入完成（提交时）才校验，不是边输边拦 - 开头和结尾没加
^/$会导致部分匹配（比如输入192.168.1.1abc也被认为合法） - 移动端
inputmode="numeric"+pattern="[0-9.]+"更实用，先保输入流畅，再用 JS 做最终判定
用 JavaScript 实时过滤非法字符和越界段
核心逻辑不是“等用户输完再报错”，而是“不让用户输错”：限制可输入字符、自动补点、拦截超限段。重点监听 input 事件，而非 keydown（后者无法处理粘贴）：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
const ipInput = document.querySelector('input[data-ip]');
ipInput.addEventListener('input', (e) => {
let value = e.target.value.replace(/[^0-9.]/g, ''); // 删掉所有非数字和点
const parts = value.split('.').filter(p => p !== '');
// 每段最多 3 位，且不能超过 255
for (let i = 0; i < parts.length; i++) {
if (parts[i].length > 3) parts[i] = parts[i].slice(0, 3);
if (parts[i] && parseInt(parts[i], 10) > 255) parts[i] = '255';
}
// 重新拼接，确保最多 4 段，段间用点连接
e.target.value = parts.slice(0, 4).join('.');
});
- 粘贴整段 IP（如
10.200.300.400）会被自动修正为10.200.255.255 - 连续多个点（
192...168）会被压缩成单个点，避免生成空段 - 不要在
input里直接e.target.value = ...后再调e.target.setSelectionRange()，容易引发光标跳变；如需精准控制光标位置，得额外记录原位置
为什么不用第三方库或 Web Component
一个 IP 输入框引入 ip-regex 或 vue-ip-input 属于典型的小题大做。真实项目中，这类控件往往要嵌入表单、适配 dark mode、兼容 IE11（如有需要）、支持无障碍读取——而通用库通常只解决“显示+校验”，其他都得自己 patch。
立即学习“前端免费学习笔记（深入）”；
- 原生实现代码量不到 30 行，可维护性远高于黑盒组件
- 若需 IPv6 支持，别硬改同一套逻辑：IPv6 格式差异太大（冒号分隔、缩写、嵌入 IPv4），应单独封装
validateIPv6()并用type属性切换模式 - 最易被忽略的是焦点管理：当用户删除某一段导致只剩两个点（如
192..1），光标可能卡在中间无法继续输入，此时需在input后用setTimeout(() => { ... }, 0)延迟重置光标到末尾
