为了关闭全局 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" 就行了，底下的后代元素会自动继承这个属性值。。

结语

我是林三心

广州的兄弟可以约饭哦，或者约球~我负责打铁，你负责进球，谢谢~