使用JavaScript实现仅支持1-100数值的百分比输入框方案咨询

需求可行性说明 #

你提出的限制仅输入1-100之间数值的需求完全可以实现，下面提供两种成熟的实现方案供选择。

方案1：基于现有text输入框改造（保留自动追加%的逻辑） #

优化点说明 #

• 自动过滤非数字字符
• 自动限制数值范围在1-100
• 修复原有实现输入时光标跳转到末尾的体验问题

实现代码 #

HTML代码（和原有保持一致）

<input type="text" class="form-control" id="amount" name="amount">

JS代码

const amount = document.getElementById('amount');
amount.addEventListener('input', function(e) {
    // 记录当前光标位置
    const cursorPos = amount.selectionStart;
    // 移除所有%和非数字字符
    let pureNum = amount.value.replace(/%/g, '').replace(/[^0-9]/g, '');
    // 处理数值范围
    if (pureNum) {
        let num = parseInt(pureNum, 10);
        if (num > 100) pureNum = '100';
        // 输入过程中允许0临时存在，失焦时再修正为1
    }
    // 拼接%赋值
    amount.value = pureNum ? `${pureNum}%` : '';
    // 恢复光标位置，避免跳转到末尾
    amount.selectionStart = amount.selectionEnd = cursorPos > pureNum.length ? pureNum.length : cursorPos;
});

// 失焦时做最终校验，确保数值在1-100之间
amount.addEventListener('blur', function() {
    let pureNum = amount.value.replace(/%/g, '').replace(/[^0-9]/g, '');
    if (!pureNum || parseInt(pureNum, 10) < 1) {
        amount.value = '1%';
    } else if (parseInt(pureNum, 10) > 100) {
        amount.value = '100%';
    }
});

方案2：使用原生number输入框（更推荐） #

该方案利用浏览器原生能力限制输入，移动端会自动弹出数字键盘，体验更友好，不需要手动处理字符过滤逻辑。

实现代码 #

HTML代码

<div style="position: relative; display: inline-block;">
    <input type="number" min="1" max="100" class="form-control" id="amount" name="amount" style="padding-right: 20px;">
    <span style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%);">%</span>
</div>

JS代码（可选，仅做额外校验）

const amount = document.getElementById('amount');
// 失焦自动修正范围
amount.addEventListener('blur', function() {
    let val = parseInt(amount.value, 10);
    if (isNaN(val) || val < 1) amount.value = 1;
    if (val > 100) amount.value = 100;
});

如果需要提交时自动带%，可以在表单提交事件中处理：

// 表单提交示例
form.addEventListener('submit', function(e) {
    e.preventDefault();
    const percentVal = `${amount.value}%`;
    // 后续提交逻辑
});

额外优化建议 #

• 不管用哪种方案，后端接收参数时都要再加一层范围校验，避免前端校验被恶意绕过
• 如果需要支持小数百分比，只需要修改字符过滤正则为/[^0-9.]/g，同时增加小数点个数限制即可
• 可根据业务需要添加输入提示，如输入范围超出100时给出轻量提示

内容的提问来源于stack exchange，提问作者Alghany Jagad