tablesorter排序表格中inputmask输入框失焦值回退如何解决？

问题根因 #

你遇到的回退问题是tablesorter的updateRows事件触发的全表行更新逻辑导致的：updateRows执行时会读取插件内部缓存的单元格内容，重写输入框的原生value属性为旧值，而inputmask的内部状态会和输入框的value属性同步，最终表现为输入值被回滚。

最优修复方案（无需修改现有AJAX逻辑） #

你当前是在单个输入框修改时触发全表行更新，实际只需要更新当前输入框所在的单元格即可，完全不会影响其他输入框的inputmask状态，仅需修改change事件的触发逻辑：

// 原有代码
// $('input[type=text]').on('change', function() {
//   $('#table').trigger('updateRows')
// })

// 修改后代码
$('input[type=text]').on('change', function() {
  // 仅更新当前输入框所属单元格，第二个参数控制是否触发重排，需要自动排序改为true即可
  $('#table').trigger('updateCell', [$(this).closest('td'), false])
})

兼容全量更新场景的方案 #

如果你的业务逻辑必须触发全表updateRows，可以在更新前暂存所有带遮罩输入框的当前值，更新后再回写即可：

$('input[type=text]').on('change', function() {
  // 暂存所有money输入框的未遮罩原始值
  const moneyVals = $('.money').map((_, el) => $(el).inputmask('unmaskedvalue')).get()
  $('#table').trigger('updateRows')
  // 回写最新值到输入框，同步inputmask状态
  $('.money').each((i, el) => $(el).val(moneyVals[i]).trigger('input'))
})

两种方案都不需要改动你现有逐行自动保存的AJAX代码，可直接复用原有逻辑。

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