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 的值，如果第一個大於第二個，則互換

如有表述不准確之處，歡迎指正，歡迎補充，感謝閱讀。