只允許輸入類型數字 0-1 之間的數字/浮點數

Question

我想要一個input數字，它允許 0-1 之間的任何浮點數，包括兩個整數。 但事實證明，讓退格鍵實際刪除一個數字是非常棘手的，因為它是NaN

我懂了：

const [rate, setRate] = useState<number>(0)

const addRate = (num: number) => {
  if (typeof num !== 'number') {
    setRate(0)
  } else {
    setRate(num)
  }
}

...
<input
  type='number'
  value={rate}
  onChange={e => addRate(parseFloat(e.target.value)}
/>

Answer 1

您可以通過向addRate state 添加一些條件來實現您的目標，也可以使用input元素的step屬性：

import { useState } from "react";

export default function App() {
  const [rate, setRate] = useState(0);

  const addRate = (num) => {
    if (typeof num !== "number" || isNaN(num) || num > 1) {
      setRate(0);
    } else {
      setRate(num);
    }
  };
  return (
    <input
      type="number"
       value={rate === 0 ? "" : rate}
      step={0.01}
      onChange={(e) => addRate(parseFloat(e.target.value))}
    />
  );
}

Answer 2

您可以在輸入中使用：

    <input type='number' value={rate}  min={0} max={1} step={0.000001} 
  onChange={e => addRate(parseFloat(e.target.value)} >

按照您想要的方式設置步驟。 對於 NaN，試試吧：

if(typeof num == 'number' || isNaN(num))

讓我知道它是否有效！

Answer 3

如果您打算使用輸入和數字，為了避免很多麻煩（尤其是在使用移動設備提示用戶輸入正確的輸入類型時），請修復由. vs , ，由於使用指令，可以節省開發代碼和獲得更簡潔的代碼的時間，我建議您查看一些替代方案。 這不是我的，但我經常使用這個。 https://digit-only.firebaseapp.com/demo我強烈建議這樣做。 浮動數字和輸入是一個痛苦的...

如果您不想要“另一個包”，那么您當然可以檢查代碼以獲得一些想法： https://github.com/changhuixu/ngx-digit-only/blob/main/projects/uiowa/digit-只有/src/lib/digit-only.directive.ts