Question

考虑到我有一个包含多行文字的页面。

当用户点击它时，它会变成多个文本输入，以便他可以修改它当他在文本输入外部点击时，它会被保存并输入被文本替换但是如果他点击另一个文本输入，我现在不想保存它，所以他不必多次点击一行来修改它。

我能够使用'focusout'事件。我检测到用户使用jQuery的e.relatedTarget点击了另一个输入。

它适用于Chrome，但Firefox不支持良好的焦点。 e.relatedTarget始终为null

如何使用firefox实现类似功能？

$('input').on('focusout', function(e) {
  if (e.relatedTarget != null) {
    $('#display').html("don't save for now")
  } else {
    $('#display').html("save the inputs");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div>
    <input type="text" />
  </div>
  <div>
    <input type="text" />
  </div>
</div>
<div id="display"></div>

Answer 1

你认为 relatedTarget 在Firefox中不是很有用。

解决方法是明确检查哪个元素获得焦点。这在 focusout 事件期间不可用（因为新元素尚未获得焦点），，但此后将直接。使用超时0将请求移动到当前执行队列的末尾将可靠地允许您获取新聚焦的元素，并检查它是否是输入之一。

＆＃13;

$('input').on('focusout', function(e) {
  setTimeout(function() {
    if ($(document.activeElement).is('input')) {
      $('#display').html("don't save for now")
    } else {
      $('#display').html("save the inputs");
    } 
  }, 0);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div>
    <input type="text" />
  </div>
  <div>
    <input type="text" />
  </div>
</div>
<div id="display"></div>

＆＃13;

使用Firefox在焦点输出后单击另一个输入时检测

1 个答案: