使用jQuery Mask Plugin时编辑场景小数位末尾零被删除如何解决

问题根因 #

编辑模态框渲染时，若后端返回的金额小数位为0，Razor默认会输出无小数位的整数字符串（例如将12345.00输出为12345）。由于你开启了data_mask_reverse="true"配置，掩码插件会从右往左数两位作为小数位，导致整数12345被错误格式化为123.45。

可选用的解决方法 #

• 方案1（最稳妥，推荐）：修改Razor渲染逻辑，强制输出两位小数
  直接在TextBoxFor参数中指定Value的格式化规则，保证input初始值固定带两位小数：

  @Html.TextBoxFor(model => model.Amount, 
      new { 
          @class = "form-control", 
          data_mask = "#,##0.00", 
          data_mask_reverse = "true",
          @Value = Model.Amount.ToString("F2")
      })
  

  渲染后input的value固定为12345.00格式，再触发input事件即可正常生成12,345.00的掩码格式。

• 方案2：修改模态框打开时的逻辑，补全小数位后再触发事件
  若不方便修改Razor代码，可以在触发input事件前先处理数值格式：

  const $amountInput = $("#Amount");
  let originVal = $amountInput.val().trim();
  // 无小数位时补全.00
  if (originVal && originVal.indexOf('.') === -1) {
    $amountInput.val(originVal + '.00');
  }
  $amountInput.trigger('input');
  

• 方案3：调用插件原生API重新应用掩码
  新版jQuery Mask Plugin提供了apply方法直接重新计算掩码，无需手动触发input事件：

  $("#Amount").mask('apply');
  

  若插件版本较旧不支持该方法，使用前两种方案即可。

内容的提问来源于stack exchange，提问作者Alonso Fallas