如何将现有keydown监听代码封装为可被HTML表单input调用的函数

你可以直接把校验逻辑封装为和你HTML中onkeydown绑定的同名全局函数keyispressed，无需额外绑定事件监听器即可直接使用：

1. 封装校验函数 #

将以下代码放在页面<script>标签内，或者引入的公共JS文件中：

function keyispressed(e) {
    // 兼容低版本IE事件对象
    e = e || window.event;
    const targetInput = e.target;
    // 放行退格键
    if (e.which === 8) return true;
    // 拼接输入完成后的值做格式校验
    const inputResult = targetInput.value + e.key;
    // 校验规则：仅允许输入最多带1位小数的数字
    if (!/^(\d+)?([.]?\d{0,1})?$/.test(inputResult)) {
        // 兼容低版本IE阻止默认行为
        e.preventDefault ? e.preventDefault() : (e.returnValue = false);
        return false;
    }
    // 额外适配你input标签设置的min/max范围限制
    const num = parseFloat(inputResult);
    if (!isNaN(num)) {
        const maxLimit = parseFloat(targetInput.max);
        const minLimit = parseFloat(targetInput.min);
        if (num > maxLimit || num < minLimit) {
            e.preventDefault ? e.preventDefault() : (e.returnValue = false);
            return false;
        }
    }
    return true;
}

2. HTML代码调整 #

可以删掉原来的addEventListener绑定逻辑，直接保留你现有的input标签即可正常触发校验：

SetPoint :<input id="input" type="text" name="setPoint" onkeydown="return keyispressed(event);" max="5" min="1" /><br />

校验效果说明 #

• 仅允许输入数字和1个小数点，小数点后最多保留1位
• 输入数值超出1-5的范围时自动阻止输入
• 兼容主流浏览器及低版本IE

内容的提问来源于stack exchange，提问作者Ben Reaby