在输入值中添加百分比 (%) 符号，但不随表单传递

Question

我目前的 nouislider 工作正常。但是我想在我的输入字段中添加一个后缀“%”符号，以向用户显示该值是一个百分比值，而我遇到的问题是随表单传递的值包含 % 符号。有谁知道一种解决方法，以便仅通过表单传递值？

我尝试过的另一种方法，对 nouislider 文档中建议的 format:wNumb 方法如下：

slider.noUiSlider.on('update', function( values, handle ) {
    moistureValues[handle].value = values[handle] + '%';
});

然而，这仍然是将百分比符号附加到 url。有没有其他方法可以解决这个问题？谢谢

Answer 1

您正在更改 value 而您只需要更改元素的 style:

connectBar.style[side] = offset + '%';

完整示例：

var connectSlider = document.getElementById('connect');

 noUiSlider.create(connectSlider, {
    start: [20, 80],
    connect: false,
    range: {
        'min': 0,
        'max': 100
    }
});    

var connectBar = document.createElement('div'),
    connectBase = connectSlider.getElementsByClassName('noUi-base')[0],
    connectHandles = connectSlider.getElementsByClassName('noUi-origin');

// Give the bar a class for styling and add it to the slider.
connectBar.className += 'connect';
connectBase.appendChild(connectBar);

connectSlider.noUiSlider.on('update', function( values, handle ) {

    // Pick left for the first handle, right for the second.
    var side = handle ? 'right' : 'left',
    // Get the handle position and trim the '%' sign.
        offset = (connectHandles[handle].style.left).slice(0, - 1);

    // Right offset is 100% - left offset
    if ( handle === 1 ) {
        offset = 100 - offset;
    }

    connectBar.style[side] = offset + '%';
});

参见此处示例：https://refreshless.com/nouislider/examples/#section-custom-connect

Answer 2

输入的值就是提交的值，这就是 HTML 中基本功能的工作原理。您有一些选择：

将 % 符号放在输入后的 <span> 中。
在表单上使用 addEventListener('submit', ...)，捕获提交，然后更改输入值并重新提交（使用 .submit()）。
显示跨度中的整个值，并为提交值使用单独的（隐藏的）输入。

（披露：我是该库的首席开发人员）。

在输入值中添加百分比 (%) 符号，但不随表单传递

Add a percentage (%) symbol to input value, but not pass with form

nouislider