焦点，简单来说，就是你在网页上的那个“闪动的小竖线”——也就是光标所在的位置。想象一下，当你点开输入框时，那个输入闪烁的光标就是获得了焦点；当你点击别的地方或者切换到别的输入框，之前的焦点就“失去”了，这时候光标也随之消失或者转移。
更具体一点来说，比如你正在textbox1里打字，突然你用鼠标点击了textbox2，那textbox1就把焦点“让”出来了，焦点转移到textbox2上，接下来你按的键都会输入到textbox2里面。其实，这种焦点的变化就是JS和浏览器帮我们自动管理的。光标的存在感那么强，其实就是浏览器告诉你“嘿！这里现在可以输入东西啦！”
给元素赋予焦点
你可能会用document.getElementById('abc').focus();这句代码让输入框获取焦点，但有时候你会发现光标并没有跑到想要的位置。别着急，有个小技巧：先把输入框的值保存起来，清空输入框，再把值放回去，这样光标就会被自动挪到内容尾部，效果棒极了！
代码示例：
javascript
var input = document.getElementById("abc");
var val = input.value;
input.value = "";
input.value = val;
input.focus();
失去焦点时的提示恢复和事件处理
很多时候，输入框支持输入提示，比如“请输入内容”，当你点进去时提示消失，点开外面提示又会还原。有时候写代码的时候你会搞不清楚，为什么按钮点了没反应，可能是按钮的type写错了，改成type="submit"才行。还有一种情况是你想用JS做鼠标移入移出触发的样式变化，其实就是用onfocus和onblur事件配合一点点定时器来搞定。
屏蔽后退键与焦点失效的解决
你遇到过按Backspace退回到上一页的尴尬吗？用JS假装让Backspace只在输入框内有效，失去焦点后禁用后退键，效果真的挺棒的。代码示范：
javascript
if (typeof window.event != 'undefined') {
document.onkeydown = function(event) {
var e = event || window.event;
var type = e.srcElement ? e.srcElement.type : e.target.type;
var code = e.keyCode || e.which;
// 只有当焦点不在文本框、文本区或提交按钮时，阻止Backspace和回车
return ((code != 8 && code != 13) || (type == 'text' && code != 13) || (type == 'textarea') || (type == 'submit'));
};
}
为什么我的focus()无效
这可不罕见。有时候你的focus()就是不起作用，可能原因很多，比如元素还没渲染完成，你调用就失效了，或者元素本身是不可聚焦的标签。一个通用的小技巧是，把focus()调用放到window.onload或者元素加载完全之后再执行，或者通过模拟点击让焦点进来。
焦点弹出层的隐藏与显示
输入框聚焦时弹出下拉菜单，失去焦点时隐藏菜单，这种需求超级常见。用jQuery的话，一个套路是给输入框绑定focus事件弹出ul，blur事件定时隐藏，一定要注意别让隐藏事件太快，把用户正在点击ul给挡住了。可以用定时器加清除定时器技巧，给用户一段“缓冲时间”爽玩。
总之啊，焦点操作看似简单，但细节多得让你抓狂！理解它的原理，掌握些小技巧，写出来的代码才能杠杠的，用户体验嗨起来！
什么是网页中的焦点，为什么它这么重要?
哇，这个问题大有来头哦！焦点其实就是你看到的那个闪烁的光标，代表用户当前可以输入的地方。它超重要，因为没有焦点，键盘输入就没地方显示，用户会超级抓狂的。想象你在输入框里敲键盘，但光标不见了，肯定想砸键盘了，哈哈！所以，正确控制焦点对提升用户体验至关重要。
为什么我的 JS 代码给元素设置了 focus，结果无效呢?
哎呀，这个情况太常见了！一般来讲，是因为你的代码调用时机不对哈，比如元素还没渲染完成，你就让它聚焦了，当然不起作用啦。最好把 focus() 放在 window.onload或者用setTimeout稍微延迟执行试试。另外注意，有些标签本身不能聚焦，比如说普通的div，就算调用focus()也是没戏的，要用input或者a标签才行哦。
如何防止用户按 Backspace 键导致浏览器后退的问题?
哎呦，这个坑大家都踩过。简单粗暴的方法就是用JS捕获键盘事件，判断焦点在哪儿，只有当焦点是在文本输入区域时，Backspace才有效，否则阻止默认事件。这样就不会误触浏览器后退了。代码写起来不难，可是要兼容各种浏览器就要多费点心思了，就是这么坑爹哈！
如何实现输入框获得焦点时显示菜单，失去焦点时隐藏菜单的效果?
这玩意儿看似简单，但细节决定成败。用jQuery的话，给输入框绑定 focus 事件让菜单显示，blur 事件隐藏菜单，不过直接隐藏容易导致你点菜单上的内容时菜单突然没了。诀窍是结合计时器，blur事件启动延时隐藏，鼠标移入菜单时取消隐藏计时器，移出时再启动，好让用户有时间点菜单，不会一点击菜单就闪没了，超级实用！
添加评论