Input標簽自動校驗功能去除怎么實現

今天小編給大家分享一下Input標簽自動校驗功能去除怎么實現的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

自動校驗

注：以下輸入框包含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這兩個另外的組件，所以想改這兩個，就得去改他們兩依賴的組件，所以結果就是：

• 1、Input：?

• 2、Select：?

• 3、InputNumber：?

• 4、Textarea：?

3、攔截React.createElement

我們都知道在React中，只要涉及到JSX語法，最終在解析時都會通過React.createElement方法來創建標簽

所以思路就是在最終調用React.createElement時，判斷如果是input、textarea這兩個類型的話，就給標簽加上spellCheck: false這個屬性，具體代碼為

這樣做的結果是：

• 1、Input：?

• 2、Select：?

• 3、InputNumber：?

• 4、Textarea：?

但是總是覺得直接涉及到React自帶方法的修改，有點不太好。。

4、全局監聽input事件

思路就是全局監聽input這個事件，并在這個事件里去給觸發事件的DOM節點增加spellCheck: false，具體代碼為：

這樣做的結果是：

• 1、Input：?

• 2、Select：?

• 3、InputNumber：?

• 4、Textarea：?

以上就是“Input標簽自動校驗功能去除怎么實現”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。