gpt4 book ai didi

javascript - 在 Firefox 中为父元素设置不显示时输入字段模糊事件未触发

转载 作者:行者123 更新时间:2023-11-28 03:49:07 25 4
gpt4 key购买 nike

我的 Div 元素中有一个输入字段。我使用鼠标聚焦文本框。当按下任意键时,我将使用 display: none 隐藏 div 元素当元素隐藏时,输入元素的模糊事件在 chrome 中触发,但在 Firefox 和 IE 浏览器中不触发模糊事件。

为了您的引用,请运行以下示例。

https://www.w3schools.com/code/tryit.asp?filename=FWDH988538TX

重现步骤:

运行示例。打开控制台窗口使用鼠标聚焦文本框。当光标位于文本框内时,单击任意键。检查控制台。模糊事件将触发。

但这在 Firefox 中不起作用

最佳答案

以下演示将使用 Chrome 或 Firefox 显示此行为:

  • 当用户尝试输入 <input> , <label>环绕 <input>变成 display:none .

    • 如果事件从 <input> 触发, 它应该是一个失去焦点的事件(例如 blur , focusout , change ...)。不管是什么,回调函数应该将两项记录到控制台:

      1. called

      2. <body></body>//作为 activeElement bug 452307

Firefox 无法在 blur 上启动事件,但它确实在 input 上触发事件。在演示中,有一个名为:addListener() 的自定义函数。它可以在单个节点上注册多个事件。此函数注册 blurinput<input> 上.

演示

<html>

<head>
<style>
#box {
height: 500px;
width: 500px;
border: 1px solid red;
display: block;
position: relative;
}
</style>
</head>

<body>
<form id='form'>
<fieldset id='box'>
<input id='key' type="text" />
</fieldset>
</form>
<script>
var ui = document.forms[0].elements;
var box = ui.box;
var key = ui.key;

box.addEventListener('keydown', closeBox);

function closeBox(e) {
e.target.style.display = 'none';
}

addListeners(key, 'input blur', triggerOnExit);

function triggerOnExit(e) {
console.log('called');
console.log(document.activeElement);
}

function addListeners(node, list, callBack) {
list.split(' ').forEach(function(e) {
node.addEventListener(e, callBack);
});
}
</script>

</body>

</html>

关于javascript - 在 Firefox 中为父元素设置不显示时输入字段模糊事件未触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52886448/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com