一、onfocus和focus区别
在HTML中，有一个焦点的概念。焦点是DOM中的一个特殊状态，指的是用户正在与之交互的元素。一个元素拥有焦点会将事件发送到这个元素，以便元素及其父级元素可以使用Javascript处理事件。在焦点移动时，会触发focus和blur事件。
onfocus和focus是与焦点状态相关的事件。当一个元素恢复焦点时，会触发onfocus事件，从而执行相关的Javascript代码。focus事件也是在元素获取焦点时触发的同一类事件。但是，onfocus是更加推荐使用的事件，因为它在绑定时支持addEventListener方法，并且它不能被取消，确保了事件的可靠性。
二、onfocus相关属性和方法
1、document.activeElement
function checkFocus(){
console.log(document.activeElement.nodeName);
}
setInterval(checkFocus, 1000);
使用document.activeElement属性可以获取当前具有焦点的元素。在上面的代码示例中，我们使用setInterval函数定时地检查当前具有焦点的元素，并将其nodeName打印在控制台上。
2、element.onblur
var input = document.getElementById("input1");
input.onblur = function() {
alert("Input失去焦点");
};
在上述代码示例中，我们为一个ID为“input1”的元素绑定了一个onblur事件，并在事件触发时弹出一个警告框，表示焦点已经移离了该元素。
3、element.focus()
function setFocus() {
document.getElementById("input2").focus();
}
setInterval(setFocus, 5000);
在上面的代码示例中，每隔5秒钟我们都会调用一个名为setFocus()的函数。这个函数会将焦点设置在一个ID为“input2”的input元素上。在实际使用中，设置焦点可以用来在文本框、下拉框和单选框等元素上实现快速的键盘输入。
三、onfocus常见应用场景
1、表单验证
表单中的每个控件都有一个属性，名为required。当该属性值设置为true时，表单提交中如果一个或多个该属性为true的元素未被填充，那么表单将不能进行提交。我们可以根据这个属性值，使用onfocus事件，在用户离开一个元素后执行表单验证。
2、文本框搜索提示
在一个较大的文本框中，我们很难手动输入一些关键字。搜索提示可以使得输入文本更加方便，目前市面上已经有很多插件供开发者选择。但是，如果不想使用插件，我们也可以使用onfocus事件实现文本框搜索提示。具体实现方法是，在文本框中加入一个默认值，当用户开始输入时，用Javascript判断是否执行提示功能。
3、菜单选择
在一个下拉菜单中选中一项时，会触发onchange事件，但是在还没有确定选择时需要有更多的提示。我们可以使用onfocus事件在选择项获得焦点时，在其他地方进行提示，以帮助用户更快速、更准确地选择。例如，在一个省市区三级联动的下拉菜单中，在选择一个省份时，可以在页面上动态显示该省份的地图或其他有关信息。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/200204.html
微信扫一扫 
支付宝扫一扫 