Firefox中NumberInput与TextInput调用Set()传入带小数点值异常求助

问题根因 #

该差异源于不同浏览器对输入事件的触发时机差异，以及Set()和Type()两个方法的底层实现逻辑不同：

• 你使用的是Ember框架的掩码输入框，会实时监听input事件格式化输入内容
• Set()方法默认逻辑为先清空输入框，再全量传入目标字符串，火狐下清空操作触发的input事件会激活输入框的掩码校验逻辑，后续全量传入的带小数点数值会被错误截断，仅保留小数点后内容
• Type()方法模拟真实用户逐字符输入，每输入一个字符触发一次input事件，完全适配前端掩码逻辑的预期，因此全浏览器兼容

可行解决方案 #

方案1：调用时直接使用Type()方法 #

如果仅少量控件存在该问题，直接改用已验证兼容的Type()方法即可，示例：

// 替换原 Amount.Set(123.45) 写法
Amount.Type("123.45");

方案2：针对该类控件自定义Set逻辑 #

如果希望保持Set()方法的调用习惯，可自定义继承NumberInput的控件类，重写赋值逻辑内部调用逐字符输入：

public class EmberMaskNumberInput<TOwner> : NumberInput<TOwner>
    where TOwner : PageObject<TOwner>
{
    protected override void OnSetValue(decimal? value)
    {
        Clear();
        if (value.HasValue)
        {
            // 用不变文化保证小数点格式统一
            Type(value.Value.ToString(CultureInfo.InvariantCulture));
        }
    }
}

定义控件时改用自定义类即可：

[FindByXPath("//input[@class='form-control ']")]
public EmberMaskNumberInput<_> Amount { get; private set; }

方案3：全局配置文本输入逻辑 #

如果项目中大量存在这类Ember掩码输入框，可全局配置所有文本类输入的Set()方法采用逐字符输入逻辑：

AtataContext.GlobalConfiguration
    .Inputs.ConfigureText()
    .UseCharByCharInput();

配置后所有TextInput、NumberInput的Set()方法都会默认采用逐字符输入逻辑，无需修改单个控件定义。

内容的提问来源于stack exchange，提问作者Steve Gray