从张鑫旭大佬文章中发现了我前端知识的匮乏

大厂技术  高级前端  Node进阶

点击上方 程序员成长指北，关注公众号

回复1，加入高级Node交流群

最近翻看张鑫旭大佬的博客，发现了一篇叫《前端原生API实现条形码二维码的JS解析识别》[1]的文章，觉得很不错，于是就把大佬的代码拷贝下来学习了下，结果就是看的我一脸懵，自信息大大受打击了。痛定思痛，于是把其中觉得有意思的地方记录下，整理成此文。

我们先看下页面是怎么样的：

功能很简单，就是复制下面的二维码图片，然后粘贴到文本框中，最后点击识别按钮，把识别二维码的结果展示到下面。

源代码：

js
复制代码

识别
方便大家复制的示意图：

背景交代完成，现在就一点一点的来分析其中代码的精妙之处。

CSS部分

tabindex = -1

js
复制代码

当我看到tabindex这个属性时，完全不知道它的用法，于是我继续在张鑫旭大佬的博客中搜索，找到一篇叫《HTML tabindex属性与web网页键盘无障碍访问》[2]的文章，这里简要说下这个属性的用法和作用。

tabindex属性是一个全局属性，也就是所有 HTML 标签都可以用的属性，比方说id，class属性等。所以，可以在div上使用。同时，这个属性是一个非常老的属性，没有兼容性问题，放心使用。

tabindex属性是一个与键盘访问行为息息相关的属性。平常可能感觉不到它的价值，但是一旦我们的鼠标坏掉了或者没电了，我们就只能使用键盘。亦或者在电视机上，或者投影设备上访问我们的网页的时候，我们只能使用遥控器。就算设备都完全正常，对于资深用户而言，键盘访问可以大大提高我们的使用效率。

当一个元素设置tabindex属性值为-1的时候，元素会变得focusable，所谓focusable指的是元素可以被鼠标或者JS focus，在 Chrome 浏览器下表现为会有outline发光效果，IE浏览器下是虚框，同时能够响应focus事件。默认的focusable元素有, , , ,