在输入字段中显示字符串 type=number

Question

是否可以在number type的input字段中显示字符串？

我想做这样的事情：

<input value="4'000" placeholder="Type some numbers" type="number" />

它将始终显示占位符，因为“4'000”有一个撇号，因此是一个字符串。

关于如何在数字输入中显示字符串（如果可能没有 package - 我正在使用 React）的任何想法？

谢谢！

Answer 1

从 WDN Web 文档输入 type="number"

number 类型的输入元素用于让用户输入数字。 它们包括内置验证以拒绝非数字条目。

所以你不能在数字输入中显示字符串。

但是你可以将 "4'000" 转换为 '4000'，并将其显示为一个数字：

"4'000".replaceAll("'", "") // => "4000"

<input value="4000" placeholder="Type some numbers" type="number">

Answer 2

因此，在您在值字段上添加value之前，您可以做的是首先“处理”它以删除值上的所有非数字内容：

使用这个 function： \D是匹配所有非数字的简写正则表达式。

const stripNonNumeric = str => str.replace(/\D/g,'');

（如果您使用状态）

const [val, setVal] = useState(stripNonNumeric(props.defaultValue));

const onChangeValue = (e) => {
   // this should be unnecessary if the field is already type="number",
   // but if its not then this use this, else just use e.target.value
   const value = stripNonNumeric(e.target);

   setVal(value);
};

return <input type="number" value={val} onChange={onChangeValue} />;

如果您从其他地方获得价值：

const value = props.valFromSomewhere;

return <input type="number" value={stripNonNumeric(value)} />;

Answer 3

对于有理数/整数但不是字符串的值，最好将input type用作数字。

因此，在您的情况下，您可以使用text作为输入字段以获得更好的可读性，并且在 javascript 中，您可以将该字符串转换为数字。

 let num = document.getElementById("some-number").value; num = num.replace(/\'/g,''); num = parseInt(num,10); console.log(num);

 <input type="text" value="4'000" id="some-number" />