Javascript 使用noUiSlider以不同于显示内容的格式更新隐藏输入

我使用noUiSlider作为一个接口来更新搜索表单中使用的一系列值。我想向用户显示格式化的数字，但在提交表单时，我想使用非格式化的数字

我创建了一些隐藏的输入，这些输入实际上是随表单一起提交的，并尝试使用输入掩码来删除格式。这在页面加载时有效，但一旦我开始更新范围（通过使用滑块或使用输入），格式就不再从隐藏的输入值中删除

我不确定对未格式化的值使用隐藏输入是否是一种方法，但这正是我现在所处的位置

<script>
$(document).ready(function(){
    var sliderPrice = document.getElementById('slider-price');

    var priceFromDisplay = document.getElementById('_pricefrom-display');
    var priceToDisplay = document.getElementById('_priceto-display');
    var inputsPriceDisplay = [priceFromDisplay, priceToDisplay];

    var priceFromHidden = document.getElementById('_pricefrom');
    var priceToHidden = document.getElementById('_priceto');
    var inputsPriceHidden = [priceFromHidden, priceToHidden];


    noUiSlider.create(sliderPrice, {
        start: [0, 55000],
        connect: true,
        step: 1000,
        behaviour: 'snap',
        range: {
            'min': 0,
            'max': 55000
        },
        format: wNumb({
            decimals: 0,
            prefix: '$',
            thousand: ','
        }),
    });

    sliderPrice.noUiSlider.on('update', function (values, handle) {
        inputsPriceDisplay[handle].value = values[handle];
        inputsPriceHidden[handle].value = values[handle];
    });

    inputsPriceDisplay.forEach(function (input, handle) {
        input.addEventListener('change', function () {
            sliderPrice.noUiSlider.setHandle(handle, this.value);
        });
        input.addEventListener('keydown', function (e) {
            var values = sliderPrice.noUiSlider.get();
            var value = Number(values[handle]);
            var steps = sliderPrice.noUiSlider.steps();
            var step = steps[handle];
            var position;
            switch (e.which) {

                case 13:
                    sliderPrice.noUiSlider.setHandle(handle, this.value);
                    break;
                case 38:
                    position = step[1];
                    if (position === false) {
                        position = 1;
                    }
                    if (position !== null) {
                        sliderPrice.noUiSlider.setHandle(handle, value + position);
                    }
                    break;
                case 40:
                    position = step[0];
                    if (position === false) {
                        position = 1;
                    }
                    if (position !== null) {
                        sliderPrice.noUiSlider.setHandle(handle, value - position);
                    }
                    break;
            }
        });
    });
    $('.unformat').mask('0000000');
});
</script>

<input type="text" id="_pricefrom-display" name="_pricefrom-display" value>
<input type="hidden" id="_pricefrom" name="_pricefrom" value class="unformat">

<input type="text" id="_priceto-display" name="_priceto-display" value>
<input type="hidden" id="_priceto" name="_priceto" value class="unformat">

$（文档）.ready（函数（）{
var sliderPrice=document.getElementById（'slider-price'）；
var pricefromsplay=document.getElementById（“u pricefrom-display”）；
var priceToDisplay=document.getElementById（“u priceto-display”）；
var inputsPriceDisplay=[priceFromDisplay，priceToDisplay]；
var priceFromHidden=document.getElementById（“U pricefrom”）；
var priceToHidden=document.getElementById（“u priceto”）；
var inputsPriceHidden=[priceFromHidden，priceToHidden]；
创建（幻灯片价格{
开始：[055000]，
连接：是的，
步骤：1000，
行为：“啪”的一声，
范围：{
“min”：0，
“最大”：55000
},
格式：wNumb({
小数：0，
前缀：“$”，
千:",
}),
});
sliderPrice.noUiSlider.on（'update'，函数（值，句柄）{
inputsPriceDisplay[handle].value=值[handle]；
inputsPriceHidden[handle]。值=值[handle]；
});
forEach（函数（输入、句柄）{
input.addEventListener（'change'，function（）{
sliderPrice.noUiSlider.setHandle（handle，this.value）；
});
input.addEventListener（'keydown'，函数（e）{
var values=sliderPrice.noUiSlider.get（）；
var值=数量（值[句柄]）；
var steps=sliderPrice.noUiSlider.steps（）；
var步骤=步骤[句柄]；
var位置；
开关（e.which）{
案例13：
sliderPrice.noUiSlider.setHandle（handle，this.value）；
打破
案例38：
位置=步骤[1]；
如果（位置===false）{
位置=1；
}
如果（位置！==null）{
sliderPrice.noUiSlider.setHandle（手柄，值+位置）；
}
打破
案例40：
位置=步骤[0]；
如果（位置===false）{
位置=1；
}
如果（位置！==null）{
sliderPrice.noUiSlider.setHandle（句柄，值-位置）；
}
打破
}
});
});
$（'.unformat'）.mask（'0000000'）；
});

---

例如，如果用户使用滑块或在显示的输入字段中键入$20500到$35000，我希望用户看到的是格式化的，但提交到表单的是20500到35000。

每个noUiSlider事件的第三个参数包含未应用格式化的滑块值。如果将该值设置为隐藏输入，则可以忽略输入屏蔽。在您的示例中：

sliderPrice.noUiSlider.on('update', function (values, handle, unencoded) {
    inputsPriceDisplay[handle].value = values[handle];
    inputsPriceHidden[handle].value = unencoded[handle];
});