為了關閉全域 Input 的自動拼寫校驗！走了好多彎路~

加油

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

自動校驗

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

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

解決方法

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

解決思路

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

多種解決方法

1、ConfigProvider

ant-design官方提供了一個元件，可以用來為全域的元件進行統一配置，這個元件可以傳入一個 input 的參數，即可配置全域的 Input 標簽

也就是：

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

2、修改defaultProps

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

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

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

3、攔截React.createElement

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

所以思路就是在最終呼叫 React.createElement 時，判斷如果是 input、textarea 這兩個型別的話，就給標簽加上 spellCheck: false 這個內容，具體程式碼為

這樣做的結果是：

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

4、全域監聽input事件

思路就是全域監聽 input 這個事件，並在這個事件裏去給觸發事件的DOM節點增加 spellCheck: false ，具體程式碼為：

這樣做的結果是：

5、MutationObserver

相容性比較差，所以不考慮了吧~~~

6、body 直接加 spellcheck="true"

哎。。。都怪沒有好好看文件。。。其實前面做的都是無用功，最方便的做法是直接在 body 上加 spellcheck="false" 就行了，底下的後代元素會自動繼承這個內容值。。

結語

我是林三心

廣州的兄弟可以約飯哦，或者約球~我負責打鐵，你負責進球，謝謝~