情況是這樣子的，上周，我們接到了一項(xiàng)任務(wù)，需要把項(xiàng)目中輸入框的那個(gè)自動(dòng)拼寫檢查功能去掉，也就是如下圖所示的紅線部分，這個(gè)檢查功能是瀏覽器默認(rèn)具備的。

圖片

解決辦法

其實(shí)是有解決方法的，而且也不難，很簡(jiǎn)單，只需要在輸入框標(biāo)簽上加上一個(gè)屬性 spellcheck=false 即可，也就是：

圖片

圖片

解決思路

然而，難題來(lái)了，我得給項(xiàng)目里所有的輸入框標(biāo)簽都添加這個(gè)屬性才行。鑒于本項(xiàng)目采用了antd-design組件庫(kù)，那么我們來(lái)梳理一下整個(gè)項(xiàng)目包含輸入框標(biāo)簽的組件有哪些呢？

• Input： 涵蓋 input
• Select： 涵蓋 input
• InputNumber： 涵蓋 input
• Textarea： 涵蓋 textarea
• body： 直接在 body 上添加 spellcheck="true"

多種解決方法

1.ConfigProvider

圖片

ant-design 官方提供了一個(gè)組件，可以用來(lái)為全局的組件進(jìn)行統(tǒng)一配置，這個(gè)組件可以傳入一個(gè) input 的參數(shù)，即可配置全局的 Input 標(biāo)簽

圖片

也就是：

圖片

由于這個(gè)配置只針對(duì)全局的Input，所以結(jié)果都有哪些組件成功去掉了拼寫校驗(yàn)功能呢：

• 1、Input：?
• 2、Select：?
• 3、InputNumber：?
• 4、Textarea：?

2.修改defaultProps

大致的構(gòu)思便是，對(duì)ant-design的源碼里input相關(guān)的部分進(jìn)行調(diào)整，給Input、Textarea等組件設(shè)定一個(gè)defaultProps，這個(gè)defaultProps如下所示：

圖片

所以具體實(shí)現(xiàn)為以下代碼：

圖片

最終的結(jié)果便是，全局的Input、Textarea成功去除了拼寫檢查功能，然而Select、InputNumber卻未能實(shí)現(xiàn)，這是因?yàn)樗鼈円蕾囉赗CSelect、RCInputNumber這兩個(gè)其他的組件，所以要修改這兩個(gè)組件，就得去改動(dòng)它們所依賴的組件，如此一來(lái)結(jié)果就是：

• Input：?
• Select：?
• InputNumber：?
• Textarea：?

3.攔截React.createElement

我們都知道在 React 中，只要涉及到 JSX 語(yǔ)法，最終在解析時(shí)都會(huì)通過 React.createElement 方法來(lái)創(chuàng)建標(biāo)簽。

圖片

所以思路就是在最終調(diào)用 React.createElement時(shí)，判斷如果是 input、textarea 這兩個(gè)類型的話，就給標(biāo)簽加上 spellCheck: false 這個(gè)屬性，具體代碼為：

圖片

這樣做的結(jié)果是：

• Input：?
• Select：?
• InputNumber：?
• Textarea：?

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

4.全局監(jiān)聽input事件

主要的想法是全局監(jiān)聽 input 事件，然后在此事件中為觸發(fā)該事件的 DOM 節(jié)點(diǎn)添加spellCheck: false屬性，具體的代碼是：

圖片

這樣做的結(jié)果是：

• Input：?
• Select：?
• InputNumber：?
• Textarea：?

5.MutationObserver

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

圖片

最終看文檔：body 直接加 spellcheck="true"

唉。。。都怪自己之前沒仔細(xì)閱讀文檔。。。實(shí)際上之前所做的全都是徒勞，最為簡(jiǎn)便的方法是直接在 body 上添加 spellcheck="false" 即可，這樣其下方的后代元素會(huì)自動(dòng)沿用這個(gè)屬性值。。。

圖片

圖片