需要将输入过滤到 Table <td> ContentEditable 中的小数点后两位

Question

首先，如果这是我的愚蠢行为，我深表歉意。我在 Whosebug 上进行了搜索，Google 找到了这个，但没有找到任何与我想要完成的类似的东西。

我有一个 table，在 table 中有几列带有 ContentEditable 标签，我正在尝试设置一些东西，以便将输入限制为仅小数点后两位包含货币的地方。

目前为止我所拥有的 - 无法使用，因为它针对输入标签。

(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", 
function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  };
}(jQuery));

$(document).ready(function() {
  $("#currencyTextBox").inputFilter(function(value) {
    return /^\d*$/.test(value);    // Allow digits only, using a RegExp
  });
});

HTML 事情的一面

        <table id="QuoteTable" class="table table-bordered table-responsive-md table- 
    striped text-center">
    <thead class="bg-white">
      <tr>
        <th class="text-center">Stock Code</th>
        <th class="text-center">Item Description</th>
        <th class="text-center">Quantity of Item</th>
        <th class="text-center">Unit Cost Exc VAT (£)</th>
        <th class="text-center">Unit Cost Inc VAT (£)</th>
        <th class="text-center">Total Cost</th>
        <th class="text-center">Remove from List</th>
      </tr>
    </thead>
    <tbody id="Products" class="bg-white">
        <tr>
        <td contenteditable='true'></td>
        <td contenteditable='true'></td>
        <td contenteditable='true'>1</td>
        <td id="currencyTextBox" contenteditable='true'>0.00</td>
        <td id="currencyTextBox" contenteditable='true'>0.00</td>
        <td class="bg-secondary" contenteditable='false'></td>
        <td class="bg-secondary" contenteditable='false'></td>
        </tr>

    </tbody>
    </table>

如果有人知道我可以使用我的 contentEditable td 标签来限制输入的任何替代方法，我很想听听。

我不能在 td 标签内使用 input 标签，因为网站其余部分的风格以及我将 table 数据发送到阵列后的方式。

Answer 1

由于您没有使用 Input 元素，因此值将是未定义的。您将需要使用 innerText 代替。这将是节点的文本值。

需要将输入过滤到 Table <td> ContentEditable 中的小数点后两位

Need to filter input to only two decimal places in a Table <td> ContentEditable

html

javascript

jquery

html-table

contenteditable