by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12203
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、focus()的两种控制

平时让一个输入框聚焦，我们可以这么设置：

input.focus();

默认情况下，控件元素通过focus()方法获取焦点，浏览器会通过滚动的方式让元素重定位到页面可视区域内。

但有时候，这种行为会影响体验，毕竟页面会突然跳一下。

如果不希望这种滚动行为触发，可以这么设置。

input.focus({
  preventScroll: true
})

此特性已支持多年，我也多次在生产环境使用。

那么本文要介绍的focusVisible又是什么呢？

二、focusVisible参数的作用

focusVisible可以控制元素获得焦点的时候，是否显示浏览器内置的outline轮廓效果。

先看一个案例，如下HTML代码：

<a href id="link">链接</a>
<button onclick="link.focus()">点击我</button>

此时，点击按钮，链接是没有焦点效果的。

这在开发中其实是有用户体验的问题的，用户并不知道这个链接是否真的被聚焦了，除非有专门的CSS定义，例如：

:any-link:focus {
  color: red;
}

效果示意：

不过针对每一个控件元素设置focus效果是啰嗦的，在一些对视觉要求不那么高的场合，通过focusVisible参数进行控制是最快捷的方法，例如：

<a href id="link">链接</a>
<button onclick="link.focus({focusVisible: true})">点击我</button>

点击按钮后的效果示意：

如果大家对自己手头的浏览器足够自信，也可以点击下面的按钮，亲自感受下聚焦后的轮廓效果。

链接 点击我

当然，focusVisible也能用来关闭浏览器默认的轮廓效果。

例如下面的输入框获得焦点后，浏览器的发光轮廓是不会显示的。

<input id="input" type="text">
<button onclick="input.focus({focusVisible: false})">点击我</button>

一般与无障碍访问与用户体验相关的特性，在国内总是无人问津，因为缺少对应的法律法规约束。

所以focusVisible这个特性注定知者寥寥，加上其兼容性，我对其未来的应用程度表示并不乐观。

三、难得碎碎念

说实话，在AI时代，对AI模型的关注和研究，我已经落后于现在的年轻人了。

我不是做管理的，如果我带着一个团队，我会花很多时间思考这些模型和工具对团队生产力的赋能，因为那可以体现我的价值，或者说为数不多可以体验价值，或者至少让上级看到价值的地方。

虽说单纯的专业技术人员也能做这样的事情，但是，考虑到“上下左右”的现实障碍（这里写了不少，都删掉了，怕厂子的公关过来提醒），是很难推动的，所以很难让我投入大量的精力在这个上面。

作为一个纯专业立足的前端开发，究竟什么才是自己的核心竞争力，这个问题我其实一直在思考。

为什么会一直思考呢？

因为每次分享那些实用或不实用的前端技术，都会有人评论，现在都AI了，学这个还有什么用。

我的回答是：

如果我的水平比AI还要强，我实现的东西比AI实现的还要好，那我是不是不要担心被AI替代，这是不是我的核心竞争力！

人的精力是有限的，尤其到了我现在这个年纪，再像10年前那样，每天研究前端到凌晨1~2点，是不可能了，只能舍弃工具层面的关注与研究，继续把精力放在语言本身上。

那些好的，可能不稳定的特性，那些特别新的但是很高效的实现上。

比方说最近的项目使用scroll-state滚动容器查询：

@container excel-scroller scroll-state(scrolled: right) {
  /* 第一列粘性定位启用的时候，出现右边框 */
  :where(td, th):first-child {
    border-right: 1px solid var(--ui-border);
  }
}

AI绝对不会想到这么实现，为何？

一是训练的代码库还没有这样的的代码；二是AI为了项目稳定，一定会使用更加稳健的传统实现，虽然说最终也都能实现最终的效果，但是代码质量天差地别。

作为一个对兼容性要求不那么高的项目，AI生产的稳健代码并非是最好的实现，如果只是单纯使用AI生成一个能跑的东西，为何需要用你呢？换个更便宜的年轻人岂不更好。

不过，想要变得专业层面，至少某一个领域比AI强，还是很难的，而且越往后越难，这个之后的文章再碎碎念吧。

OK，就这样吧，感谢阅读，欢迎分享。

😉😊😇
🥰😍😘

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12203

（本篇完）