Firefox focus() 设置焦点并立即模糊

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/not 工作在 ff fiddle: https://jsfiddle.net/v8hmpgv2/

Answer 1

这里的问题是（由于我不是 100% 确定的原因），Firefox 在将元素附加到文档后触发了 .number_input 上的 blur 事件，但在您的 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 to demonstrate. (Don't worry about any potential memory leakage due to constantly adding new event handlers - the jQuery docs 表示 .remove() 应该每次都删除它们。）

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

Firefox focus() 设置焦点并立即模糊

Firefox focus() sets the focus and blurs immediately

javascript

firefox

jquery

focus

onblur