focus/blur 上的 firefox 错误解决方法

Question

我编写了以下代码来检查数据库中是否已存在输入字段中插入的值。

$('#nome_field').blur(function(){
        var field_name=$('#nome_field').val();
        $.ajax({
          url: "check_field_unique.php",
          method: 'post',
          data: {field_name:field_name},
          dataType: "json"
        }).done(function(data){
            if(data.status==500){
              //esiste un altro campo con lo stesso nome
              bootbox.alert({
                message: data.message, 
                size: 'small',
                backdrop: true,
                callback: function(){
                    //$('#nome_field').val('');
                    $('#nome_field').focus();           
                }
              });
            }       
        });
    });

它在除 Firefox 之外的所有浏览器中都可以正常工作。 a known bug opened 20(!!) years ago 仍然影响 Firefox，导致焦点和模糊之间的无限循环。当代码到达 $('#nome_field').focus(); 行时，它将聚焦但随后再次触发模糊并再次运行验证（无限循环）。

如果我取消注释这一行 $('#nome_field').val(''); 那么 $('#nome_field').focus(); 将永远不会执行，但输入将被清除。我的期望是通过清理输入字段来修复错误。无论如何，期望的行为是让用户为他修复而不是清除输入的内容。

有人知道如何解决这个问题吗？

Answer 1

解决方法是编写安全检查代码，确保在设置焦点后不会立即发生模糊。

$('#nome_field').blur(function() {
  var tb = $(this);
  if (tb.data("ignore")) {
    return;
  }
  var field_name = tb.val();
  $.ajax({
    url: "check_field_unique.php",
    method: 'post',
    data: {
      field_name: field_name
    },
    dataType: "json"
  }).done(function(data) {
    if (data.status == 500) {
      //esiste un altro campo con lo stesso nome
      bootbox.alert({
        message: data.message,
        size: 'small',
        backdrop: true,
        callback: function() {
          //$('#nome_field').val('');
          tb.data("ignore", true)
          tb.focus();
          window.setTimeout(function () {
            tb.removeData("ignore");
          }, 100);
        }
      });
    }
  });
});

focus/blur 上的 firefox 错误解决方法

workaround for firefox bug on focus/blur

javascript

firefox

jquery

onfocus

onblur