原本在JavaScript中是不能直接使用div 的onblur 属性的,但是我们可以利用tabindex 属性来还获取div的onblur 属性
tabindex 属性: 当用户使用Tab 键时 获取有tabindex属性的对象(如在网站登录经常从账号用Tab键跳到密码选框上,用的就是这个属性,并且这个属性也支持鼠标点击)
tabindex取值:
tabindex = -1 : 排除有该tabindex=-1的元素,无法通过tab键使该元素获取焦点。
tabindex = 0 : tabindex=0的元素获取焦点的优先级排在其他所有具有tabindex值的元素之后。
tabindex = x : x取值1 到 32767,元素按取值的大小,按顺序获取焦点。
实例:
<!doctype html>
<html>
<head>
<title>当红色div失去焦点时隐藏</title>
</head>
<body>
<script>
//创建红色DIV方块
red = document.createElement('div');
red.setAttribute('id','red');
red.setAttribute('tabindex','3');
red.style.cssText = "width:100px;height:100px;background-color:red;";
document.body.appendChild(red);
//创建黄色div方块
yellow = document.createElement('div');
yellow.setAttribute('id','yellow');
yellow.setAttribute('tabindex','2');
yellow.style.cssText = "width:100px;height:100px;background-color:yellow;";
document.body.appendChild(yellow);
//当红色方块失去焦点时隐藏
let redHide = document.getElementById('red');
redHide.onblur = function(){
redHide.style.display = 'none';
}
</script>
</body>
</html>