input取值区间实例

前端开发中经常会遇到 input 取值区间的需求，比如搜索的时候，价格区间，积分值区间

大致的需求为 input 的值必须是正整数，第二个 input 的值必须大于第一个

dom结构如下：

<div id="box">
    <label >所需积分：</label>
    <div class="input_box">
        <input id="input1" type="text" oninput="inputChange(this)" onchange="compare()" />
        <span class='m05'>-</span>
        <input id="input2" type="text" oninput="inputChange(this)" onchange="compare()" />
    </div>
</div>

js代码如下：

function inputChange(ele){
    ele.value = ele.value.replace(/\D+/,'').replace(/^0*/g,'');
};
function compare(){
    // 获取输入框的值
    var input1 = document.getElementById('input1');
    var input2 = document.getElementById('input2');
    // 输入框的值转为Number类型
    var num1 = parseInt(input1.value);
    var num2 = parseInt(input2.value);
    // 如果第二个值小于第一个则互换
    if(num2!=0 && num1>num2){
        var temporaryValue = num1;
        num1 = num2;
        num2 = temporaryValue;
        input1.value = num1;
        input2.value = num2;
    };
};

整个方法主要为两部分：

1. 利用 oninput 方法在输入的时候控制输入内容必须是数字，且第一个数字不能为0

2. 利用 onchange 方法在 input 输入完成后比较两个 input 的值，如果第一个大于第二个，则互换

如有表述不准确之处，欢迎指正，欢迎补充，感谢阅读。