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

时间:2014-07-15 18:59:00

标签: javascript jquery events

这里的想法是函数只需要在任何输入/ textarea / select的下一个焦点上运行,但是一次性函数可以重置为再次运行。

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

值得注意的是,测试是否选中该复选框不是一个选项,因为此附加焦点事件应该能够针对任何类型的字段设置模糊,单击或任何其他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);
});

1 个答案:

答案 0 :(得分:0)

经过广泛的Google搜索,我能够回答我自己的问题......

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

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将参数传递给已定义事件函数的能力。在编写焦点事件逻辑时,这最终使我的生活变得更加轻松。

此外,此解决方案的优点在于事件可以取消绑定,具体取决于事件函数的逻辑。这使得能够将一次性事件转变为可能一次性的事件。