PrimeFaces InputNumber组件输入值丢失问题分析与解决方案

问题背景

在PrimeFaces 13.0.14-LTS版本中，用户报告了一个关于InputNumber组件的严重问题：当用户在输入框中输入数值后，通过Tab键或鼠标点击离开输入框时，已输入的值会被重置为0.00。这个问题在从6.2.4 Elite版本升级后出现，影响了表单的数据收集功能。

问题根源

经过深入分析，发现问题与InputNumber组件的symbol属性配置有关。当symbol属性值以空格开头时（例如" $ "），会导致组件在失去焦点时错误地重置输入值。这是因为组件内部处理符号和数值分离时，对空格的处理存在逻辑缺陷。

技术细节

在PrimeFaces的底层实现中，InputNumber组件依赖AutoNumeric库进行数值格式化。当组件失去焦点时，会执行以下操作：

1. 获取当前输入值
2. 移除千位分隔符
3. 移除货币符号
4. 将处理后的值设置回组件

问题出在第三步，当货币符号包含前导空格时，符号移除操作不彻底，导致后续数值解析失败，最终回退到默认值0.00。

解决方案

临时解决方案

对于使用13.0.14-LTS版本的用户，可以采取以下任一方案：

1. 修改symbol属性：移除符号前的空格，例如将" $ "改为"$ "

2. 应用MonkeyPatch：在页面加载时执行以下JavaScript代码修复问题：

if (PrimeFaces.widget.InputNumber) {
  PrimeFaces.widget.InputNumber.prototype.bindInputEvents = function() {
    var $this = this;
    this.input.off('blur.inputnumber').on('blur.inputnumber', function(e) {
      var element = AutoNumeric.getAutoNumericElement(this);
      if (element && this.value && this.value.length > 0) {
        var newValue = this.value;
        if ($this.cfg.digitGroupSeparator) {
          newValue = newValue.replaceAll($this.cfg.digitGroupSeparator, '');
        }
        if ($this.cfg.currencySymbol) {
          newValue = newValue.replaceAll($this.cfg.currencySymbol, '');
        }
        element.set(newValue.trim(), null, true);
        
        if (element.rawValueOnFocus !== '' && Number(element.rawValue) === Number(element.rawValueOnFocus)) {
          element.rawValueOnFocus = element.rawValue;
        }
      }
      $this.copyValueToHiddenInput();
    });
  }
}

永久解决方案

该问题已在PrimeFaces 14.0.10版本中修复。建议受影响的用户升级到该版本或更高版本。新版本中，组件会正确处理包含空格的货币符号，确保输入值在失去焦点时保持不变。

最佳实践

1. 在设计表单时，避免在symbol属性中使用前导空格
2. 定期更新PrimeFaces版本以获取最新的bug修复
3. 对于关键业务表单，建议在升级前进行全面测试
4. 考虑使用单元测试验证InputNumber组件的行为

总结

这个问题展示了组件属性配置细节可能对功能产生的重大影响。作为开发者，我们需要：

• 仔细阅读组件文档中的属性说明
• 在升级后进行全面回归测试
• 关注社区报告的问题和解决方案
• 理解底层实现原理，以便快速定位和解决问题

通过正确处理货币符号格式，可以确保InputNumber组件在各种场景下都能可靠地工作，为用户提供流畅的数据输入体验。