Input標籤自動校驗功能去除實現

2022-07-04 18:01:37

自動校驗

注：以下輸入框包含input、textarea

事情是這樣的，上個星期，接到了一個需求，要求去除掉專案中的輸入框的自動拼寫檢查功能，也就是下圖出現的紅線，這個檢查是瀏覽器自帶的

解決方法

其實是有解決方法的，而且也不難，很簡單，只需要在輸入框標籤上加上一個屬性spellcheck=false即可，也就是：

<input spellcheck=false />
<textarea spellcheck=false />

解決思路

但是問題來了，我需要給全域性的輸入框標籤都加上才行，由於本專案是使用了antd-design這個元件庫，那我們來看看整個專案都有哪些元件包含了輸入框標籤呢？

1、Input：包含input

2、Select：包含input

3、InputNumber：包含input

4、Textarea：包含textarea

多種解決方法

1、ConfigProvider

ant-design官方提供了一個元件，可以用來為全域性的元件進行統一設定，這個元件可以傳入一個input的引數，即可設定全域性的Input標籤

也就是：

<ConfigProvider 
  input={{spellCheck: false}}>
</ConfigProvider>

由於這個設定只針對全域性的Input，所以結果都有哪些元件成功去掉了拼寫校驗功能呢：

1、Input：✅
2、Select：❌
3、InputNumber：❌
4、Textarea：❌

2、修改defaultProps

大概的思路就是，修改ant-design的原始碼中的input這一部分，給Input、Textarea這些元件加上一個defaultProps，這個defaultProps長這樣：

const defaultProps = {
  spellCheck: false
}

所以具體實現為以下程式碼

// Input
import Input from 'antd/es/input';
Input.defaultProps = {
  ...Input.defaultProps,
  ...defaultProps,
};
export default Input
// Textarea
import TextArea from 'antd/es/input/TextArea';
TextArea.defaultProps = {
  ...TextArea.defaultProps,
  ...defaultProps,
};
export default Textarea

結果就是，全域性的Input、Textarea都去除了拼接檢查了，但是Select、InputNumber卻沒有去除，因為他們是依賴了RCSelect、RCInputNumber這兩個另外的元件，所以想改這兩個，就得去改他們兩依賴的元件，所以結果就是：