时间戳

首页 > 解决方案 > 在焦点离开元素之前或在下一个元素获得焦点之前是否有运行 jquery 事件？

javascript - 在焦点离开元素之前或在下一个元素获得焦点之前是否有运行 jquery 事件？

问题描述

我有一个包含两个输入元素的表单，它们有些交织在一起。在元素#1 中（元素#2 在 tabindex 顺序中元素#1 之后），一旦用户尝试离开该字段，我运行一个 ajax 调用来检查输入的值是否已经在数据库中，如果是，使用javascript 确认对话框向用户提问。第二个元素在获得焦点后会自动弹出一个模式窗口，其中包含用户可以做出的选择。我正在使用 Jquery。

我想在用户离开第一个元素后立即运行“此数据是否存在”ajax 调用。Blur 事件似乎是我想要的，因为无论用户是否进行了更改，都需要进行现有数据检查。

但是，我使用模糊的问题是它的处理程序在第一个元素失去焦点并且焦点跳转到元素#2 之后运行。因此，元素#1 的模糊处理程序弹出确认屏幕，同时元素#2 的焦点处理程序弹出选择模式，我现在同时打开了 2 个弹出窗口。

我想让用户有机会在弹出元素#2 的选项之前回答确认警报中的问题。

是否有类似于模糊的 Jquery 事件，但它只是在焦点实际上丢失之前运行？或者，有没有办法阻止下一个元素获得焦点，直到第一个元素的模糊处理程序完成？

尝试在 Blur 处理程序中停止传播或 preventDefault() 不会执行任何操作，因为在 blur 处理程序运行之前已经发生了对 element#2 的关注。

我尝试将元素#2 的 tabindex 设置为 -1，然后在需要时以编程方式关注该元素，但是从该元素移开标签成为一个问题，并且反向标签跳过它（直接跳到元素#1） - 我仍然希望该元素在 tabindex 排序中，但只是不希望它获得焦点，直到 element#1 完成其失去焦点时需要运行的处理程序。

我也尝试过设置状态变量，但是当我添加代码来处理两个元素之间的转换时，我最终会遇到类似的问题，并且会带来额外的边缘情况复杂性。我也尝试过处理 mousedown 和 keydown 事件并试图阻止默认处理，但这也增加了显着的复杂性和出错的空间。

任何想法都会受到欢迎。谢谢你。

标签： javascripthtmljqueryfocusblur

解决方案

这个解决方案有点小技巧，但可以实现您的目标。诀窍是放置相当于接受焦点模糊的“无操作”元素。然后在 AJAX 请求之后控制选项卡。

在每个“模糊”事件中，我们都会进行测试以确保我们捕捉到正确的<input>元素（我将把这些细节留给你）。

AJAX 请求完成后，再关注下一个<input>.

对于此演示，在第二个输入中键入 2，然后tab. 我添加了一个短暂的延迟，以便您可以看到它有效。

$("input").on('blur', function(e){
  if(this.value == 2) {
    console.log("do ajax request");
    setTimeout((function(){
      $(this).next().next('input').focus();
    }).bind(this), 500);
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input tabindex="1" />
<input tabindex="2" />
<div tabindex="3"></div>
<input tabindex="3" />

推荐阅读