网页元素怎么取消焦点？这里有几种常用方法汇总。

今天就来唠唠“取消焦点”这事儿。听起来好像挺简单，不就是鼠标点别处嘛但真搞起来，有时候还真挺烦人的，特别是写代码的时候。

我也就想着那些最简单的法子，就是平时用电脑时候的那几招：

• 狂按Tab键：有时候按几下，焦点就跑到别的地方去，算是歪打正着。按住Shift再按Tab还能倒着跑，有时候能跑回啥都没有的地方。
• 按Esc键：有些弹窗或者菜单，按一下这个确实能直接关掉，焦点自然也没。但这也不是万能的。
• 鼠标点空白地方：这是最常用的，屏幕上随便找个没东西的地方点一下，一般就行。但如果是在写程序控制界面，总不能让用户必须去点一下空白？
• Alt+Tab切走：切换到别的程序，再切回来，当前窗口的焦点也没。这招跟写代码控制也没啥关系。

这些法子在平时用电脑还行，但我要的是在我自己做的网页上，用代码来控制它！不能手动去按键盘点鼠标。

为啥要琢磨这事儿？

起因是前段时间搞一个项目，做个弹出层。这弹出层一出来，里面的输入框或者按钮得自动拿到焦点，方便用户操作。这好办。但问题是，弹出层关之后，那个焦点还傻乎乎地留在刚刚那个按钮上（虽然按钮都看不见），或者乱跳到别的地方，体验贼差。

我就琢磨着，关掉弹出层的时候，得顺手把这个焦点给“请走”，让它别碍事。

试好多法子。最开始网上查，很多人说用一个叫 blur() 的东西。这玩意儿是写网页代码（JavaScript）用的。

我就试下，得先找到那个当前有焦点的元素，然后对着它喊一声 blur()，就是“失去焦点”的意思。还真管用！就像这样写：

// 假设那个有焦点的倒霉蛋叫 currentElement

有时候，你不知道当前焦点具体在哪，或者想更保险一点，可以直接对着整个文档来，让当前活动的那个元素失去焦点。这样写更省事：

// 这句代码挺好使
if (*) {
  *();

加个判断，免得没活动元素的时候报错。这句代码的意思就是，找到当前页面上正获得焦点的那个元素（不管它是谁），让它失去焦点。简单粗暴，我喜欢。

对，还有人提到用CSS改样式，比如写个 outline: none;。这个我也试，它确实能把那个蓝色的、或者虚线的选中框给去掉，看起来好像没焦点。但实际上，焦点还在那儿！只是你看不到它而已。你要是按回车或者空格，该触发还是会触发。所以这招治标不治本，只能隐藏那个框框，并不能真正取消焦点状态，得看情况用。

所以绕一圈，发现，在写代码控制网页焦点这事上，最靠谱、最直接的还是用 blur() 这个方法，特别是结合 来用，省心。虽然一开始觉得点点鼠标、按按键盘就能解决，但真到自己写东西的时候，还得是用代码来精确控制才行。

行，今天就分享这点实践心得，希望能帮到同样被焦点问题困扰的朋友。搞定收工！