Question

我有一个输入字段和一个按钮。当单击按钮时，输入字段必须得到焦点。

我需要行为略有不同，具体取决于输入字段是由用户手动聚焦，还是由于点击按钮而导致聚焦。

这似乎相对简单，但到目前为止我还无法提出解决方案。任何想法都非常受欢迎。

$("button").click(function() {
    target_input = $("input");
    target_input.focus();
});

$("input").focus(function() {
    // if focus done manually by user
    //    do something
    // if focus done via button
    //    do something else
});

Answer 1

这是一个不使用额外变量的解决方案，而是检查事件。

$("button").click(function() {
    target_input = $("input");
    target_input.focus();
});

$("input").focus(function(e) {
    // if focus done manually by user
    //    do something
    // if focus done via button
    //    do something else

   if(e.originalEvent.relatedTarget){
      // only from button events
   }

   // here is from all events
});

如果我们没有使用按钮来发起焦点，则此e.originalEvent.relatedTarget将返回null。记得在函数中添加e。

Answer 2

你应该能够使用Event.isTrusted：

Event接口的isTrusted只读属性是一个布尔值当事件由用户操作生成时为true，并且为false 当事件由脚本创建或修改或通过调度发送时 dispatchEvent。

$("input").focus(function(e) {
    if(e.isTrusted) {...} else {...}
});

正如评论中所指出的，IE和Safari都不是这样的。

Answer 3

这没有全局变量，它是跨浏览器的工作解决方案：

$('button').click(function () {
  $(this).prev('input').focus()
})

$('input').click(function (e) { // yes, listen to click instead
   // original event exists only if input was clicked directly
  if (e.originalEvent) {
    console.log('manually triggered')
  }
})

<div style="background-color: yellow;">
  <input type="text">
  <button>Focus input</button>
  <br>
  <input type="text">
  <button>Focus input</button>
</div>

<script src="https://unpkg.com/jquery"></script>

如何判断是什么触发了jQuery focus（）？

3 个答案: