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

Question

Firstly, apologies if this is me being silly. I have searched on Stackoverflow and have Google'd this but haven't found any thing similar to what I am trying to accomplish.

I have a table with a few columns in the table with a ContentEditable tag, I am trying to set something up so it limits the input to only 2 decimal places to contain a currency.

What I have so far - which won't work as it targets the input tag.

(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 side of things

        <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>

If any one knows of any alternative ways I can get my contentEditable td tag to limit input I would love to hear it.

I cannot use input tags inside the td tag because of the style of the rest of the website and the way I am sending my table data to an aray after.

Answer 1

Since you are not using an Input element, value will be undefined. You will want to use innerText instead. This will be the text value of the node.