添加一個百分比（％）符號輸入值，但不通過表格

我目前有nouislider工作正常。不過，我想爲我的輸入字段添加一個後綴「％」符號，以向用戶顯示該值爲百分比值，並且我遇到的問題是與窗體一起傳遞的值包含％符號。有誰知道一種解決方法，只有值與表單一起傳遞？添加一個百分比（％）符號輸入值，但不通過表格

的另一種方法，我試過了，格式爲：wNumb方法nouislider文檔中建議如下：

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

但是這仍是附加百分比符號的URL。有沒有其他辦法可以解決這個問題？由於

來源

2016-02-06 luke_mclachlan

的輸入的值是提交的值，這是HTML中基本功能的工作原理。你有一些選擇：

將%簽署在輸入後的<span>。
使用表格上的addEventListener('submit', ...)，捕獲提交，然後更改輸入值並重新提交（使用.submit()）。
在一個範圍內顯示整個值，併爲提交值使用單獨的（隱藏）輸入。

（披露：我是該庫的首席開發人員）。

來源

2016-02-08 16:47:25 Lg102

Leon，謝謝你，第三個選擇肯定是最好的選擇。我嘗試在輸入後放置'％'符號，但美學上它不是最好的解決方案。偉大的滑塊和支持！ –

-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

來源

2016-02-06 15:03:13 Mhmd

完全沒有回答這個問題。 – Lg102

添加一個百分比（％）符號輸入值，但不通過表格

回答

相關問題