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

Posted 2023-05-08

【中文标题】在使用 tablesorter 排序的表中使用输入元素时，如何使用 inputmask 获取输入元素以不将更改恢复为先前的值？

【英文标题】：How can I get input elements using inputmask to not revert changes to the previous value when using them within a table sorted with tablesorter?

【发布时间】：2021-09-06 14:40:59

【问题描述】：

我已经花费了大量时间来解决使用输入掩码的输入元素问题，这些输入元素在使用 tablesorter 排序的表中。

当用户在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>

【参考方案1】：

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

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