使输入标签显示值和实际值（存储在value属性中）不同？

Question

对于某些功能，我希望我的实际值和显示值不同。 JS有没有办法做到这一点？

一种方法是采用具有相同名称/ ID但隐藏的另一个输入标记。

Answer 1

你可以在UI控件中有一个自定义属性假设你在谈论输入标签，那么它是这样的：

<input type='text' id='txt' value='Display Value' data-custattr='Actual Value' />

在读取值时，您可以获得实际值，如：

document.getElementById('txt').getAttribute('data-custattr')

希望这可以帮助。

Answer 2

编辑：我可能这样做的方法是在提交之前附加一些javascript，如果需要促进属性状态，则输入事件监听器，如果你想要属性是自定义的，而不是你需要的“值” 'change'上的事件监听器将保持您的自定义属性更新。

有点像：

    element.addEventListener('change', () => {
    element.setAttribute('myAttrName', element.value);
});

这里的要点是你不需要额外的元素，而是需要几行js。