关于页面获焦的小技巧

document.activeElement

返回文档中当前获得焦点的元素, 属性只读

• 与明确的元素比较, 可以知道目标元素是否获焦

document.activeElement === document.getElementById("a")

• 没有元素获焦时, 指向 body

element.focus()

设置目标获焦

• 如进入表单页面后, 主动让第一个 input 获焦

document.getElementById("a").focus()

• 利用 input 获焦的特性, 结合 css 让目标节点隐藏, 还能让页面滚动到指定位置

#a {
    
    
	width: 0;
	height: 0;
	border: none;
	padding: 0;
	margin: 0;
	opacity: 0;
}

element.blur()

设置目标失焦

• 如果你只想让目标滚动到指定位置, 而不获焦, 只要在目标获焦后, 移除焦点就可以

document.getElementById("a").focus()
document.getElementById("a").blur()

document.hasFocus()

检测文档是否获焦, 属性只读

• hasFocus() 判断的是该页面是否获焦, 与 activeElement 无关

document.hasFocus()

• 可以利用这个方法判断用户是否离开页面

//end