Question

我目前有nouislider正常工作。但是我想添加一个后缀＆＃34;％＆＃34;符号到我的输入字段，向用户显示该值是百分比值，我遇到的问题是与表单一起传递的值包括％符号。有没有人知道一个解决方法，只有值与表单一起传递？

我尝试的另一种方法，格式为：nouislider文档中建议的wNumb方法如下：

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

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

Answer 1

输入的值是提交的值，这是HTML中基本功能的工作方式。你有一些选择：

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

（披露：我是这个图书馆的首席开发人员）。

Answer 2

您正在更改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

将百分比（％）符号添加到输入值，但不传递表单

2 个答案: