在使用 tablesorter 排序的表中使用 inputmask 时，如何使用 inputmask 获取输入元素以不将更改还原为以前的值？

问题描述

我花了相当多的时间在使用 tablesorter 排序的表中处理使用 inputmask 的输入元素的问题。

当用户在 updateRows 事件触发后在掩码字段中输入输入并更改焦点时，掩码字段会将内容恢复为之前输入的值。

我已经仔细阅读了这两个插件的文档以找出解决方法，但我还没有找到合适的解决方案。我意识到还有其他方法可以解决这个问题，但是我有 ajax 代码（用于分别自动保存每一行）需要重写，如果可以避免的话，我不希望这样做。

任何帮助将不胜感激。

示例：https://jsfiddle.net/5bqyod6j/1/

代码：

<table id='table'>
  <thead>
    <tr>
      <th class='sorter-inputs'>Col 1</th>
      <th class='sorter-inputs'>Col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="control"><input type="text" class='money' value='25' form='f-1'></div>
      </td>
      <td>
        <div class="control"><input type="text" value='test2' form='f-1'></div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="control"><input type="text" class='money' value='12' form='f-2'></div>
      </td>
      <td>
        <div class="control"><input type="text" value='another 2' form='f-2'></div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="control"><input type="text" class='money' value='89' form='f-3'></div>
      </td>
      <td>
        <div class="control"><input type="text" value='val-2' form='f-3'></div>
      </td>
    </tr>
  </tbody>
  <!-- These are part of the ajax functionality -->
  <form action="" id="f-1"></form>
  <form action="" id="f-2"></form>
  <form action="" id="f-3"></form>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tablesorter@2.31.3/dist/js/jquery.tablesorter.min.js" integrity="sha256-dtGH1XcAyKopMui5x20KnPxuGuSx9Rs6piJB/4Oqu6I=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tablesorter@2.31.3/dist/js/parsers/parser-input-select.min.js" integrity="sha256-ugEATjydQqCNpuca1CGyiLVdN9N6uuouP2CkIL7Dr1k=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/jquery.inputmask@5.0.6/dist/jquery.inputmask.js" integrity="sha256-E9pFDiHlfB3afd46AyTqvmjcSv7VREgs5Y5e8TBECU0=" crossorigin="anonymous"></script>
<script>
  $('#table').tablesorter()
  $('.money').inputmask('currency',{
    autoUnmask: true,groupSeparator: ',',allowMinus: true,digits: 2,placeholder: '_',inputMode: 'decimal'
  })
  $('input[type=text]').on('change',function() {
    $('#table').trigger('updateRows')
  })
</script>

解决方法

发现问题。它位于 js/parsers/parser-input-select.js 中。它似乎在不合时宜的时候附加了一些处理程序来很好地使用输入掩码。编写自定义解析器或文本提取器并在更好的时间更新表格似乎效果很好。

我还发现，即使加载所述文件，甚至根本不使用解析器也会触发错误。