Question

我有一个<span class="numbers">和此代码用于点击，它会创建一个新的<input class="number_input">字段并将焦点设置在其上：

            $('body').on('click','.numbers', function () {
                oldNumbersValue = $(this).html();
                var input = $('<input />', {'style':'font-size:30pt','type': 'number','class':'number_input', 'name': 'aname', 'value': oldNumbersValue});
                $(this).parent().append(input);
                input.focus();
            });

当场失去焦点时，它将被删除：

 $('body').on('blur', '.number_input',function () {
// do something
 $(this).remove();
});

这适用于Chrome，但不适用于Firefox！在Firefox中，它会创建字段，将焦点设置在字段上并立即丢失它！

任何解决方案？

修改

在chorme工作/不在ff小提琴中工作： https://jsfiddle.net/v8hmpgv2/

Answer 1

这里的问题是（由于我不能100％确定），Firefox在元素附加到文档后触发blur上的.number_input事件，但在focus()实际通话之前。

您可以使用此JSFiddle demo在Firefox中看到这种情况 - 请注意消息的顺序，指示何时在.number_input设置和丢失焦点。

您可以修改代码的一种方法是不使用事件委派，而是将blur处理程序直接附加到.number_input：

$('body').on('click', '.numbers', function (e) {
    oldNumbersValue = $(this).text();
    var input = $('<input />', {
        'style': 'font-size:30pt',
        'type': 'number',
        'class': 'number_input',
        'name': 'aname',
        'value': oldNumbersValue
    });
    $(this).parent().append(input);

    input.focus();
    input.blur(function(){
        $(this).remove();
    });
});

这里有working JSFiddle来演示。（不要担心由于不断添加新事件处理程序而导致的任何潜在内存泄漏 - jQuery docs表示.remove()每次都应删除这些事件。）

希望这有帮助！如果您有任何问题，请告诉我。

Firefox focus（）立即设置焦点和模糊

1 个答案: