不在用戶輸入中輸入特殊字符

Question

我有一個輸入字段，我試圖阻止特殊字符 [點、hiphen、空格逗號和 e]，以便用戶無法在移動設備和 chrome 上輸入此特殊字符。

 function App() { const handleInput = (event) => { event.target.value = event.target.value.replace(/[e\.\- ]/g, ""); }; return ( < div className = "App" > < input type = "number" onInput = { handleInput } /> < / div > ); } // Render it ReactDOM.render( < App / >, document.getElementById("react") );

 <div id="react"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

面臨兩個問題，一個是（999。）我可以在數字之間輸入點，當我輸入一些數字並輸入 hiphen 時，它會清除所有數字（999-）=>（）。

如何停止這兩種行為，以便用戶只能輸入 0-9 位

Answer 1

在用戶鍵入時替換值會導致用戶體驗不佳（cursor 會跳來跳去）。 在您之前的問題中，您通過keydown阻止了這些字符，這似乎是更好的方法。 它可能不適用於所有移動瀏覽器，但由於您可能想要它們為type="number"提供的數字屏幕鍵盤，因此您可能必須接受它，因此在您要使用該值時進行一些后處理（而不是在他們輸入時）。

這是該實用方法的一個示例，可以防止在使用它時對值進行后處理，以防您無法防止某些移動設備上的無效字符。 我還將輸入設置為受控輸入，因為這樣可以更輕松地在組件的其他地方使用它的值：

 const {useState} = React; const invalid = new Set(["e", ".", "-", " "]); function App() { const [value, setValue] = useState(""); const handleInput = (event) => { if (invalid.has(event.key)) { event.preventDefault(); } }; const useValue = (event) => { const prepped = value.replace(/[e.\- ]/g, ""); console.log(`Using value "${value}"`); }; return ( <div className="App"> <input type="number" onKeyDown={handleInput} onChange={e => setValue(e.target.value)} value={value} /> <input type="button" value="Use Value" onClick={useValue} /> </div> ); } ReactDOM.render(<App />, document.getElementById("root"));

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

Answer 2

我嘗試了您的代碼，並注意到當我將其更改為 type="text" 時，它可以正常工作。