Question

我有一个<input type="text">字段，当这个字段失去焦点时我需要清除它（这意味着用户点击了页面上的某个地方）。但有一个例外。当用户点击特定元素时，不应清除输入文本字段。

我尝试使用event.relatedTarget检测用户是否点击了某个地方，而是点击了我的特定<div>。

但是正如您在下面的代码段中看到的那样，它根本不起作用。 event.relatedTarget始终返回null！

＆＃13;

function lose_focus(event) {
  if(event.relatedTarget === null) {
    document.getElementById('text-field').value = '';
  }
}

＆＃13;

.special {
  width: 200px;
  height: 100px;
  background: #ccc;
  border: 1px solid #000;
  margin: 25px 0;
  padding: 15px;
}
.special:hover {
  cursor: pointer;
}

＆＃13;

<input id="text-field" type="text" onblur="lose_focus(event)" placeholder="Type something...">

<div class="special">Clicking here should not cause clearing!</div>

＆＃13;

Answer 1

简答：将tabindex="0"属性添加到应显示在event.relatedTarget中的元素。

说明： event.relatedTarget包含获得焦点的元素。问题是你的特定的 div无法获得焦点，因为浏览器认为这个元素不是按钮/字段或某种控制元素。

以下是默认情况下可以获得焦点的元素：

  指定了<a>属性的
href元素
  指定了<link>属性的
href元素

<button>元素

<input>不是hidden
的元素
<select>元素

<textarea>元素

<menuitem>元素

元素draggable
  指定了<audio>属性的
<video>和controls元素

event.relatedTarget发生onblur时，null将包含上述元素。所有其他元素都不会被计算在内，点击它们会将event.relatedTarget放入tabindex。

但是可以改变这种行为。你可以标记＆＃39; DOM元素作为可以通过 tabindex 属性获得焦点的元素。以下是标准的说法：

function lose_focus(event) { if(event.relatedTarget === null) { document.getElementById('text-field').value = ''; } }内容属性允许作者指示一个元素应该是可聚焦的，是否应该使用顺序焦点导航可以到达，并且可选地，建议在顺序焦点导航顺序中元素的位置出现。

所以这是更正后的代码段：

＆＃13;

.special {
  width: 200px;
  height: 100px;
  background: #ccc;
  border: 1px solid #000;
  margin: 25px 0;
  padding: 15px;
}
.special:hover {
  cursor: pointer;
}

＆＃13;

<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>

＆＃13;

com.wdullaer:materialdatetimepicker:3.1.3

＆＃13;

blur event.relatedTarget返回null

1 个答案: