写一个用tab键实现focus和blur事件的函数
时间: 2024-05-12 08:16:50 浏览: 120
JS:onfocus和onblur 事件应用举例
4星 · 用户满意度95%
好的,下面是一个用tab键实现focus和blur事件的函数的示例代码:
```
function setTabFocus() {
var formElements = document.forms[0].elements;
for (var i = 0; i < formElements.length; i++) {
var element = formElements[i];
element.onfocus = function() {
this.className += " focused";
this.setAttribute("data-focused", "true");
};
element.onblur = function() {
this.className = this.className.replace(/ ?focused/g, "");
this.removeAttribute("data-focused");
};
element.onkeydown = function(e) {
if (e.keyCode == 9) {
var focused = this.getAttribute("data-focused");
if (focused) {
this.className = this.className.replace(/ ?focused/g, "");
this.removeAttribute("data-focused");
}
else {
e.preventDefault();
for (var j = i + 1; j < formElements.length; j++) {
if (formElements[j].type != "hidden") {
formElements[j].focus();
break;
}
}
}
}
};
}
}
```
这个函数会设置表单中所有元素的focus和blur事件,并且可以使用tab键切换焦点。当元素获得焦点时,会添加一个名为“focused”的CSS类名,当元素失去焦点时,会移除这个CSS类名。当按下tab键时,函数会寻找下一个可见的表单元素并将焦点移动到那里,如果没有更多的可见元素,则不执行任何操作。
阅读全文