MUI TextField格式输入显示数字和小数

Question

我正在尝试格式化这个的输入值MUI组件显示最多3个数字，后面用点分隔最多2个小数，例如233.99，我想把这个值存储在一个叫做value (const [value, setValue] = useState(0))的反应状态中。

我遇到了麻烦，因为我看到了很多方法来实现这一点，但我发现如果用户已经输入了前3个数字，并且不让他输入更多，同时也保持小数值，因为正如我所说的，应该有最多2个小数，这也很复杂。我试过regex函数，toFixed js函数，等等，但我不能使这个工作顺利。

Answer 1

如果我理解正确的话，你可以这样做:

let inp = document.getElementById("input");
inp.addEventListener("keypress", ev => {
ev.preventDefault();
if (!/d|./.test(ev.key)) return;
inp.value = /^d{0,3}(.d{0,2})?$/.test(inp.value + ev.key) ? inp.value + ev.key : inp.value;
// update state when value has changed
// if (inp.value != value) setValue(inp.value);
})

<input type="text" id="input">

或者，您可以使用<input type="text" pattern="^d{0,3}(.d{0,2})?$">和input.checkValidity()来通知用户提交。