我不希望在輸入之前和輸入之后有任何空格，例如“text”和“text”不允許，所以我替換了空格，但是當我們從記事本復制“text”并粘貼到輸入并想要洗掉時空間它會引發錯誤，如“無法讀取未定義讀取目標的屬性”。所以當用戶在前后給空間時如何自動替換空格
const handleKeyDown = (e) => {
if (e.key === " ") {
e.preventDefault();
}
};
const handleChangeWhiteSpace = (e) => {
if (e.target.value.includes(" ")) {
e.target.value = e.target.value.replace(/\s/g, "");
}
};
<MyInput
type="text" style={{width:'240px'}}
error={formik.errors.input && formik.touched.input}
value={formik.values.input}
onBlur={formik.handleBlur}
onChange={(e)=>{formik.handleChange(e);handleChangeWhiteSpace()}}
onKeyDown={handleKeyDown}
name="input"
id="input"
autoFocus={false}
autoComplete="off"
/>
uj5u.com熱心網友回復：
使用正則運算式以下應該可以作業，您可以在regex101對其進行測驗：
e.target.value = e.target.value.replace(/^[ \t] |[ \t] $/gm, "");
更清潔的解決方案將是sojin建議的
e.target.value = e.target.value.trim()
uj5u.com熱心網友回復：
代替
const handleChangeWhiteSpace = (e) => {
if (e.target.value.includes(" ")) {
e.target.value = e.target.value.replace(/\s/g, "");
}
};
有了這個
const handleChangeWhiteSpace = (e) => {
e.target.value = e.target.value.trim();
};
要在文本欄位中粘貼文本時注冊更改，請使用 onPaste 事件
onPaste={handleChangeWhiteSpace}
最終代碼
const handleKeyDown = (e) => {
if (e.key === " ") {
e.preventDefault();
}
};
const handleChangeWhiteSpace = (e) => {
e.target.value = e.target.value.trim();
};
<MyInput
type="text" style={{width:'240px'}}
error={formik.errors.input && formik.touched.input}
value={formik.values.input}
onBlur={formik.handleBlur}
onPaste={handleChangeWhiteSpace}
onChange={(e)=>{formik.handleChange(e);
handleChangeWhiteSpace()}}
onKeyDown={handleKeyDown}
name="input"
id="input"
autoFocus={false}
autoComplete="off"
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/408168.html
標籤：
上一篇：從最后出現的字串中洗掉數字