JQuery将焦点事件附加到下一个焦点输入

JQuery attach focus event to the next focused input

本文关键字：焦点 下一个 输入 事件 JQuery      更新时间：2023-09-26

这里的想法是，函数只需要运行任何输入/文本区/选择的下一个焦点，但一次性函数可以重置以再次运行。

一个简单的例子是选中了一个复选框，然后在任何其他字段的下一个焦点事件上运行检查，以查看该字段是否具有特定的属性值(有多个可能的字段为真)。这应该允许用户取消选中复选框，然后再次选中复选框以再次触发相同的事件。

值得注意的是，测试复选框是否被选中不是一个选项，因为这个附加的焦点事件应该有能力设置从模糊，点击，或任何其他jQuery事件为任何类型的字段。

我目前的想法是设置一个全局JavaScript变量，在每个焦点事件上检查:

var checkFocus = false;

然后，为所有表单字段设置焦点事件，包括input, textarea等:

$('input').focus(function(){
  if(checkFocus){
    // Put the target code here.
    checkFocus = false;
  }
});

这将允许代码的任何部分设置checkFocus为true，并随后告诉焦点事件运行目标代码。

是否有一种方法可以捕获每个元素的所有焦点事件?如果是这样，是否有一种方法可以运行只运行一次的事件，并且可以在需要时设置为再次运行?

编辑

有一种方法可以使焦点事件成为一次性事件，但这不包括任何非输入元素的表单字段，如textarea或select。这可以用off(event)函数来完成。我不确定这是否对这个问题有帮助，因为对其他选择器这样做实际上会使代码出现不止一次。

$("input").on("focus", function(event) {
  alert( "This will be displayed only once." );
  $(this).off(event);
});

经过广泛的谷歌搜索，我能够回答我自己的问题…

你可以这样设置事件(可以在任何地方设置):

var id = 'something';
var name = 'something-else';
// Bind the event to three tags commonly used on forms
$("input, select, textarea").on("focus", {id: id, name: name}, focusEvent);

这是focusEvent函数，将处理字段焦点上的逻辑:

var focusEvent = function(event){
  // Commonly used values for an event
  var id = event.data.id;
  var name = event.data.name;
  var focused_id = $(this).attr('id');
  var focused_name = $(this).attr('name');
  // Do something on the next focus event
  // Unbind the one-time event
  $("input, select, textarea").off("focus", focusEvent);
}

这是我能想到的最简单的设置，不需要全局变量，也不需要设置多个需要单独处理的事件。

问题中最初没有包括的一部分是.on()函数使用event.data向已定义的事件函数传递参数的能力。这最终使我在编写焦点事件逻辑时的工作简单了许多。

此外，该解决方案的优点是可以根据事件函数的逻辑解除事件绑定。这提供了将一次性事件转换为可能一次性事件的能力。

相关文章：