--- theme: smartblue --- 持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，[点击查看活动详情](https://juejin.cn/post/7099702781094674468)
# 本文简介 **点赞 + 关注 + 收藏 = 学会了**
在 `HTML` 中，`input` 输入框有2种方法自动聚焦，最简单的是在 `input` 标签上添加 `autofocus` 属性。再次点的方法是使用 `JS` 获取输入框元素，再调用 `focus` 事件选中输入框。在 `Fabric.js` 中，`IText` 组件也提供了类似的方法。

# 实操 `Fabric.js` 的 `IText` 是一个可编辑文本框，可以在项目运行时输入文字，功能其实和 `HTML` 的 `input` 差不多，都是可以让用户输入。
## 默认情况在 `Fabric.js` 中，如果在创建 `IText` 时没有添加文字，在画布上你是很难用肉眼观察出你的输入框在哪的。 ![01.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/25eafe551445442ebcc3faf681cff2d9~tplv-k3u1fbpfcp-watermark.image?) ```html

``` 此时画布和输入框是被创建出来了，但凭肉眼是很难找到输入框在哪。
## 激活输入框想要解决上述问题，可以激活输入框。 ![02.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e006766597fd45a59cdccf14c8e209c5~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码 iText.enterEditing() ``` 用 `enterEditing()` 方法可以激活输入框。此时可以看到光标所在的位置一闪一闪的。 [《enterEditing 文档》](http://fabricjs.com/docs/fabric.IText.html#enterEditing)
## 再进一步使用 `enterEditing()` 后输入框是激活了，也能看到光标一闪一闪。但这就完了吗？我们还可以再进一步，配合 `Fabric Canvas` 的 `setActiveObject()` 方法，激活被选中的对象。这样选中输入框的效果会更加明显。 ![03.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/00b418142f0742e68059a5cfdcb51c22~tplv-k3u1fbpfcp-watermark.image?) ```js // 省略部分代码 canvas.add(iText).setActiveObject(iText) iText.enterEditing() ``` 从上图可以对比出，加上 `setActiveObject()` 后，呈现出来的效果更加明显了。 [《setActiveObject 文档》](http://fabricjs.com/docs/fabric.Canvas.html#setActiveObject)

# 总结 `Fabric.js` 其实并不难，它比起直接使用原生 `Canvas` 要简单多了。使用 `Fabric.js` 最主要是多看文档，然后把多个 `api` 结合起来使用，就能创造出多种效果~

# 代码仓库 ⭐[IText 激活输入框](https://gitee.com/k21vin/fabricjs-demo/blob/master/tutorial/IText/enterEditing.html)

# 推荐阅读 👍[《Fabric.js 输出精简的JSON》](https://juejin.cn/post/7106159817361719304) 👍[《Fabric.js 缩放画布》](https://juejin.cn/post/7105046849362329608) 👍[《Fabric.js IText设置指定字符颜色和背景色》](https://juejin.cn/post/7104399263152635918) 👍[《console.log也能插图！！！》](https://juejin.cn/post/6913554505841770509) 👍[《前端需要的免费在线api接口》](https://juejin.cn/post/7041461420818432030)