我有一个<input type="text">
字段,当该字段失去焦点时我需要清除它(这意味着用户单击了页面上的某个位置)。但有一个异常(exception)。当用户单击特定元素时,不应清除输入文本字段。
我尝试使用event.relatedTarget
检测用户是否不仅点击了某个地方,还点击了我的特定<div>
.
但是,正如您在下面的代码片段中看到的,它根本不起作用。 event.relatedTarget
总是返回null
!
function lose_focus(event) {
if(event.relatedTarget === null) {
document.getElementById('text-field').value = '';
}
}
.special {
width: 200px;
height: 100px;
background: #ccc;
border: 1px solid #000;
margin: 25px 0;
padding: 15px;
}
.special:hover {
cursor: pointer;
}
<input id="text-field" type="text" onblur="lose_focus(event)" placeholder="Type something...">
<div class="special">Clicking here should not cause clearing!</div>
最佳答案
简短回答:添加tabindex="0"
属性应出现在 event.relatedTarget
中的元素.
说明: event.relatedTarget
包含获得焦点的元素。问题是您的特定 div 无法获得焦点,因为浏览器认为该元素不是按钮/字段或某种控制元素。
以下是默认情况下可以获得焦点的元素:
<a>
elements withhref
attribute specified<link>
elements withhref
attribute specified<button>
elements<input>
elements that are nothidden
<select>
elements<textarea>
elements<menuitem>
elements- elements with attribue
draggable
<audio>
and<video>
elements withcontrols
attribute specified
所以event.relatedTarget
当 onblur
时将包含以上元素发生。 所有其他元素将不被计算在内,点击它们将放置 null
在event.relatedTarget
.
但是可以改变这种行为。您可以使用 tabindex 将 DOM 元素“标记”为可以获得焦点的元素 属性。标准是这样说的:
The
tabindex
content attribute allows authors to indicate that an element is supposed to be focusable, whether it is supposed to be reachable using sequential focus navigation and, optionally, to suggest where in the sequential focus navigation order the element appears.
这是更正后的代码片段:
function lose_focus(event) {
if(event.relatedTarget === null) {
document.getElementById('text-field').value = '';
}
}
.special {
width: 200px;
height: 100px;
background: #ccc;
border: 1px solid #000;
margin: 25px 0;
padding: 15px;
}
.special:hover {
cursor: pointer;
}
<input id="text-field" type="text" onblur="lose_focus(event)" placeholder="Type something...">
<div tabindex="0" class="special">Clicking here should not cause clearing!</div>
关于javascript - 模糊事件.relatedTarget 返回 null,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42764494/