Question

客户想要一个表单，其中输入的数字在某些方面表现得像Excel。特别是，保存的数据和显示的数据可以不同，就像在Excel中一样。例如，保存的数据可能为32425.537342，显示的数据可能为$32,425.54。

我们采取的方法是使用input对，type='text'和type='number'之一。 number input默认隐藏，存储要发送的数据，text input将其显示给用户。 number input仅在重点关注相应的text input时显示，此时隐藏text input。

以下代码在Chrome中的行为符合预期。

HTML：

<input type="text">
<input type="number">
<br>
<input type="text">
<input type="number">

jQuery的：

$(document).ready(function(){
    $("[type='number']").hide();
    $("[type='text']").on("focus",function(){
        $(this).next().show().focus();
        $(this).hide();
    });
    $("[type='number']").on('blur',function(){
        $(this).prev().show();
        $(this).hide();
    });
});

Fiddle。但是，在适用于Mac OS的Firefox（版本33.1.1）中，根本不起作用。当text input被关注时，它会完全消失，而number input不会被显示。

在尝试确定问题的位置时，我将代码切换回来：

$(document).ready(function(){
    $("[type='number']").hide();
    $("[type='text']").on("focus",function(){
        $(this).next().show().focus();
        $(this).hide();
    });
});

Fiddle。这实际上在Chrome和Firefox中均可正常使用;在焦点上，text input会被永久隐藏，number input会永久显示。

所以似乎问题出现在代码的后半部分。如果您取出$(this).hide();，则代码在Chrome和Firefox中的行为一致（尽管不是特别有用的方式）：

$(document).ready(function(){
    $("[type='number']").hide();
    $("[type='text']").on("focus",function(){
        $(this).next().show().focus();
        $(this).hide();
    });
    $("[type='number']").on('blur',function(){
        $(this).prev().show();
        /* $(this).hide(); */
    });
});

Fiddle。同样，如果您只删除$(this).prev().show();，它在Chrome和Firefox中的行为也相同：一切最终都会被隐藏。

$(document).ready(function(){
    $("[type='number']").hide();
    $("[type='text']").on("focus",function(){
        $(this).next().show().focus();
        $(this).hide();
    });
    $("[type='number']").on('blur',function(){
        /* $(this).prev().show(); */
        $(this).hide();
    });
});

Fiddle。行为的分歧只发生在两条线都在那里; Chrome会隐藏一个input并显示另一个，而Firefox会在您专注于text input时导致所有内容消失。

我认为这可能与Firefox焦点/模糊问题有关，这使得它在iframe（example）中表现得很奇怪，但是从JSFiddle的iframe中取出它并没有任何效果。全屏小提琴here。

那么如何让Firefox中的行为与Chrome中的行为相匹配？

Answer 1

This answer提供了诀窍的JavaScript，使用它我可以将jQuery中的等价物放在一起：

$(document).ready(function(){
    $('[type="number"]').hide();
    $('[type="text"]').on('focus',function(){
        $(this).next().show().focus();
        $(this).hide();
    });
    $('[type="number"]').on('blur',function(){
        var $this = $(this);
        setTimeout(function() {
            if(!$(document.activeElement).is($this)){
                $($this).hide();
                $($this).prev().show();
            }
        }, 0);
    });
});

Fiddle

引用that answer以了解为何有必要：

[问]他的问题是不同的浏览器选择调用事件处理程序以不同的顺序。一种解决方案是提供其他事件通过设置0毫秒的计时器来触发的机会，然后检查字段以查看哪些（如果有）聚焦。

jQuery的.on模糊功能在Firefox中执行不正确

1 个答案: