Question

我有两个输入，它们共同组成一个语义单元（想想小时和分钟输入一起形成一个时间输入）。如果两个输入都失去焦点，我想调用一些Javascript函数，但如果用户只是在这两个函数之间跳转，我不想触发任何东西。

我尝试将这两个输入包装在div中并将一个onBlur添加到div中，但它永远不会触发。

接下来我尝试将onBlurs添加到两个输入并让它们通过jQuery检查其他的：focus属性，但似乎当onBlur触发下一个元素时尚未获得焦点。

有关如何实现这一目标的任何建议吗？

编辑：有人质疑这个目的。我想基于这两个输入所包含的值更新一些其他字段，但理想情况下，如果用户仍在更新第二个输入的过程中，我不想更新其他字段（例如，如果用户选项卡从第一个到第二个输入）。

Answer 1

我在这里做了一个工作的例子： http://jsfiddle.net/bs38V/5/

它使用了这个：

$('#t1, #t2').blur(function(){
setTimeout(function(){
    if(!$('#t1, #t2').is(':focus')){
        alert('all good');
    }
},10);
});

Answer 2

var focus = 0;
$(inputs).focus(function() { focus++ });
$(inputs).blur(function() {
    focus--;
    setTimeout(function() {
        if (!focus) {
            // both lost focus
        }
    }, 50);
});

Answer 3

这种行为的目的是什么？当场失去焦点时，模糊事件会触发，并且一次只能有一个场获得焦点。

例如，在验证的情况下，你可以做的是对两个字段的模糊应用相同的功能，并完全检查字段的值。

如果没有上下文，很难为您提供更多帮助。

d

Answer 4

另一种方法是检查模糊事件的 relatedTarget。如 MDN documentation 中所述，这将是接收焦点的元素（如果有）。您可以处理模糊事件并检查焦点现在是否已放在您的其他输入中。我使用了 data- 属性来标识它们，但如果更适合您的情况，您同样可以使用 id 或其他一些信息。

我的代码来自我参与过的一个 angular 项目，但原则应该转化为 vanilla JS/其他框架。

<input id="t1" data-customProperty="true" (blur)="onBlur($event)">
<input id="t2" data-customProperty="true" (blur)="onBlur($event)">

onBlur(e: FocusEvent){
    const semanticUnitStillHasFocus = (val.relatedTarget as any)?.dataset?.customProperty === "true";

    // Do whatever you like with this knowledge
}

将多个元素上的onBlur作为一个单元触发

4 个答案: