javascript - 使用 noUiSlider 以与显示格式不同的格式更新隐藏输入

Question

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

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

我不确定对未格式化的值使用隐藏输入是否可行，但这是我现在的处境。

<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">

例如，如果用户使用 slider 或在显示的输入字段中键入 20,500 到 35,000 美元的范围，我希望用户看到的是格式化的，但提交到表单的是 20500 到 35000。

Answer 1

每个 noUiSlider 事件的第三个参数包含未应用格式的 slider 值。如果将该值设置为隐藏输入，则可以省略输入掩码。在你的例子中:

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