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

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" >
    <thead >
      <tr>
        <th >Stock Code</th>
        <th >Item Description</th>
        <th >Quantity of Item</th>
        <th >Unit Cost Exc VAT (£)</th>
        <th >Unit Cost Inc VAT (£)</th>
        <th >Total Cost</th>
        <th >Remove from List</th>
      </tr>
    </thead>
    <tbody id="Products" >
        <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  contenteditable='false'></td>
        <td  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.

CodePudding user response：

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.