怎么让DIV失去焦点后隐藏自身
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么让DIV失去焦点后隐藏自身相关的知识，希望对你有一定的参考价值。
我这个回答评论里的 无名duter 朋友告知我说 “可以给div或者span元素添加属性tabindex”。姑且测试一下，是支持的，感谢无名duter ！只能怪自己学艺不精。
那么简陋的代码如下：
<!doctype html><html>
<head>
<meta name="author" content="青青水豌豆 "/>
<title>当红色div失去焦点时隐藏</title>
</head>
<body>
<script>
//创建红色DIV方块
red = document.createElement('div');
red.setAttribute('id','red');
red.setAttribute('tabindex','1');
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 = () => redHide.style.display = 'none';
</script>
</body>
</html>
说明一下：以上代码用文本文档保存后，修改扩展名.html，然后再用chrome或者firefox或者最新版的微软Edge浏览器打开，IE浏览器不支持。双核浏览器请使用极速模式，兼容模式也是调用的IE也不支持。
-
-
-
--------------------------------------------------------------
以下是以前回答的。不做修改。
你好，DOM中的元素DIV不支持失去焦点事件onblur。
支持失去焦点的元素有button, checkbox, fileUpload, layer, frame, password,
radio, reset, submit, text, textarea, window。没有包括div
你可以让某个事件发生的时候尝试让这个div隐藏，比如
<div id="test">你需要为这个盒子设置宽高和颜色</div><button>btnnn</button>
<script>
var test = document.getElementById('test');
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function()
test.style.display = 'none';
//当然，也可以让这个按钮失去焦点的时候隐藏test的div
btn.onblur = function()
test.style.display = 'none';
</script>
当你点击这个按钮的时候，可以隐藏div。
这样回答你会觉得太简陋了，或许你需要别的，比如鼠标移除div或者点击其他事件某个条件让其隐藏。
参考技术A 一开始的想法是在弹出的DIV上用onMouseout事件隐藏自己，如果这个DIV中没有其它内容的话是可以实现的react native 隐藏键盘 TextInput失去焦点
参考技术A 在实际的开发中 当用到rn的TextInput等组件 并获得焦点的时候 会自动弹出键盘当输入完毕后 键盘也不会隐藏 输入框也是聚焦的状态
有两种方法可以隐藏键盘
方法一：使用rn Keyboard的dismiss方法 隐藏键盘
我把这个方法用在了 点击提交的时候 ，但是成功提交后 键盘又弹出 并且第二个输入框是聚焦的状态 （显然这个方法不行）
方法二：调用输入框失焦方法 blur
首先 用户输入完毕后 点击页面 其他区域可以隐藏键盘 其次 直接点击提交 也能隐藏键盘
我在页面最外层用的TouchableWithoutFeedback（只响应用户的点击事件 在ui上无任何改变）
当用户onPress的时候 调用 Keyboard的dismiss方法 隐藏键盘
其次 在 输入框组件里写上 ref='InputText(自定义名字)' ，在点击提交的时候 调用该组件 this.refs.InputText.blur() 使这个输入框失去焦点 这样也影藏了键盘
以上是关于怎么让DIV失去焦点后隐藏自身的主要内容，如果未能解决你的问题，请参考以下文章
js 输入框获取焦点显示div 失去焦点隐藏div 点击div也消失了怎么解决