typescript 如何删除input type='number'中数字的前导零?

vwhgwdsa  于 2023-01-31  发布在  TypeScript
关注(0)|答案(5)|浏览(328)

我是React JS的初学者。我有一个用例,我想更正用户在<input type='number>字段中输入的数字。
默认情况下,用户可以输入带有前导零的数字,如0002或-0042等。
我希望在用户输入数字时删除前导零。此外,用户应该能够输入小数和负数。我已经使用onBlur完成了这一操作,但我希望以某种方式在onChange方法本身完成这一操作。

onChange=()=>{ ... }

<input type = 'number' onChange={onChange}>
e3bfsja2

e3bfsja21#

我想让它在用户输入数字时删除前导零。
可以使用String.replace删除前导零:

// ... code that obtains the user input in `inputText` ...
    inputSanitisedText = inputText.replace(/^0+/, '')

(我假设你不想在用户输入的时候改变他们的输入,那将是非常糟糕的UI设计。)

kxeu7u2r

kxeu7u2r2#

您可以使用regex从开头删除零:/^0+/
在您的情况下:

onChange = (e) => {
    const _removedZeros = e.target.value.replace(/^0+/, '')
    ///...
}
xxhby3vn

xxhby3vn3#

你可以简单地把value乘以1,就像这样:

const [value, setValue] = useState("");
<input
    value={Boolean(value) ? value : ''}
    type="number"
    onChange={(e) => setValue(e.target.value * 1)}
  />

这样,用户不能键入前导零

vybvopom

vybvopom4#

根据您的描述,您可以使用parseFloat()函数解决此问题。此函数将删除前导零,并将输入值转换为十进制/分数。代码应如下所示:

const onChange = (event) => {
  const value = parseFloat(event.target.value);
  event.target.value = isNaN(value) ? '' : value;
};
oxiaedzo

oxiaedzo5#

像这样的东西吗

foo.oninput = (e) => {
  const value = foo.value;

  let [_, sign, integer, decimals] = value.replace(/[^\d\.\-]/g, "") // invalid characters
    .replace(/(\..*?)\./g, "$1")  // multiple dots
    .replace(/(.+)-/g, "$1")      // invalid signs
    .match(/^(-?)(.*?)((?:\.\d*)?)$/);

  let pos = foo.selectionStart - 1;
  if(!integer && decimals) pos += 2;

  // don't convert an empty string into a 0, 
  // unless there are decimal places following
  if(integer || decimals) {
    integer = +integer;
  }
  
  const formatted = sign + integer + decimals;
  
  if(formatted !== value) {
    foo.value = formatted;
    foo.setSelectionRange(pos, pos);
  }
}
<input type="text" id="foo" />

相关问题