HTML元素step属性怎么应对非法字符输入-html教程-PHP中文网

step属性不拦截非法字符，仅用于数值校验；onkeypress+charcode易失效，因它无法识别软键盘、粘贴、ime输入及部分控制键（如backspace），且现代浏览器中charcode已废弃，推荐改用keydown+key或input+正则替换。

html元素step属性怎么应对非法字符输入

step 属性本身**完全不处理非法字符输入**——它只参与数值合法性校验（比如 value 是否满足 min + n × step），对键盘敲入的 .、e、-、多个小数点、字母等，浏览器一律放行。想拦住这些字符，必须用 JavaScript 主动干预。

为什么 onkeypress + charCode 拦截容易失效

很多教程推荐用 onkeypress="return event.charCode >= 48 && event.charCode 只放行数字键，但它有硬伤：

无法拦截粘贴（paste 事件）、拖拽、右键粘贴、IME 组合输入（如中文输入法下按 1 出来的是「一」）
charCode 在现代浏览器中已废弃，key 或 code 更可靠但逻辑更复杂
禁掉 - 后，负数输入直接被砍断；禁掉 . 后，小数输入无解

真正可用的 input 事件过滤方案（保留光标位置）

必须在 input 事件里做字符串清洗，并手动恢复光标，否则光标会跳到末尾。关键不是“删什么”，而是“删完怎么不丢位置”：

先记录 selectionStart 和 selectionEnd
用正则提取合法部分（例如 /^-?\d*\.?\d*$/ 允许负号、小数点、数字，但禁止 .. 或 -.3）
计算被删字符数：原字符串长度 − 清洗后字符串长度
若光标在被删区域之后，新光标位置 = 原位置 − 被删数；若在中间或之前，需按实际删除位置偏移
赋值后调用 input.setSelectionRange(newStart, newEnd)

简例（仅允许一位小数）：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

input.addEventListener('input', e => {
  const { value } = e.target;
  const match = value.match(/^(-?\d*\.?\d{0,1})/);
  const cleaned = match ? match[1] : '';
  const start = e.target.selectionStart;
  const end = e.target.selectionEnd;
<p>if (cleaned !== value) {
e.target.value = cleaned;
const delta = value.length - cleaned.length;
const newStart = start > delta ? start - delta : 0;
const newEnd = end > delta ? end - delta : 0;
e.target.setSelectionRange(newStart, newEnd);
}
});</p>