allow only numeric in td where contenteditable = true

Related searches

I am losing my mind over this simple part. I have a table with over 20 columns, where some of them are editable some are not.

What I need now is that when a user adds a new row he is forced to write only numbers in a few cells. So far I tried examples from here : accept only numbers in td accept numbers using isNumeric() both of them didn't work

It only worked if I called the functions on my whole table. But that is not usable since there are also cells that should also accept String values.

$("#my_id").keydown(function(e) {
  if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
    ((e.keyCode == 65 || e.keyCode == 86 || e.keyCode == 67) && (e.ctrlKey === true || e.metaKey === true)) ||
    (e.keyCode >= 35 && e.keyCode <= 40)) {
    return;
  }
  if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
    e.preventDefault();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="my_id" border="1" width="100px" height="50px">
  <thead></thead>
  <tbody>
    <tr>
      <th>1</th>
      <td class="allow_only_numbers" contenteditable="true" id="idid"></td>
    </tr>
  </tbody>
</table>

Try this..

$(".allownumeric").on("keypress keyup blur", function(event) {
  $(this).val($(this).val().replace(/[^\d].+/, ""));
  if ((event.which < 48 || event.which > 57)) {
    event.preventDefault();
  }
});

$(".allowstring").on("keypress keyup blur", function(event) {
  $(this).val($(this).val().replace(/[^\w].+/, ""));
  if (!((event.which >= 65 && event.which < 92) ||
      (event.which >= 97 && event.which <= 122))) {
    event.preventDefault();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="my_id" border="1" width="200px" height="50px">
  <thead>
    <tr>
      <th>1 (only num)</th>      
      <th>2 (only str)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="allownumeric" contenteditable="true"></td>
      <td class="allowstring" contenteditable="true"></td>
    </tr>
  </tbody>
</table>

Allow only numbers in contenteditable � GitHub, contenteditable-allow-only-numbers.md. <!DOCTYPE html> <html> <title> Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport"� 1 allow only numeric in td where contenteditable = true Nov 29 '19. 1 Angular library import * Nov 29 '19. View all questions and answers → Badges (15)


When the entered char is not a number we have to avoid/skip the handling of the current event.

Assuming a paste event is not a problem, you can test the entered char using a regexp as follow:

$("#my_id td").on('keydown keyup', function(e) {
  if (!/^\d+$/.test(e.key)) {
    e.preventDefault();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="my_id" border="1" width="100px" height="50px">
  <thead></thead>
  <tbody>
    <tr>
      <th>1</th>
      <td class="allow_only_numbers" contenteditable="true" id="idid"></td>
    </tr>
  </tbody>
</table>

number justification in HTML table cells where some cells are , If you use normal text content instead, just with the contenteditable attribute, it becomes much simpler to make editable and non-editable data� The contenteditable attribute is an enumerated attribute whose keywords are the empty string, true, and false. The empty string and the true keyword map to the true state. The false keyword maps to the false state. In addition, there is a third state, the inherit state, which is the missing value default (and the invalid value default). — WHATWG


I managed to correct it. I need the "only numeric values" when a new row was added, before that it is useless. So I added the function inside the "add row"- function and now it works. Thank you all for help

HTML DOM contentEditable Property, The numbers in the table specifies the first browser version that fully supports the property. true|false, Specifies whether the content of an element should be editable. Possible values: innerHTML = "Enable content of p to be editable!"; Definition and Usage. The contentEditable property sets or returns whether the content of an element is editable or not. Tip: You can also use the isContentEditable property to find out if the content of an element is editable or not.


Restricting Input in HTML Textboxes to Numeric Values, Restricting Input in HTML Textboxes to Numeric Values Ok, here's a fairly basic one – how to force a textbox to accept only numeric input. It returns true to indicate the keypress is to go through or false to eat the keystroke� Note: When the contenteditable attribute is not set on an element, the element will inherit it from its parent. Browser Support The numbers in the table specify the first browser version that fully supports the attribute.


contenteditable, The contenteditable global attribute is an enumerated attribute indicating if Note that although its allowed values include true and false , this attribute is an enumerated one and not a Boolean one. contenteditable="plaintext-only" < input type="image"> � <input type="month"> � <input type="number">� true or an empty string, which indicates that the element is editable. false , which indicates that the element is not editable. If the attribute is given without a value, like <label contenteditable>Example Label</label> , its value is treated as an empty string.


'true' indicates that the element is contenteditable. 'false' indicates that the element cannot be edited. 'inherit' indicates that the element inherits its parent's editable status. You can use the HTMLElement.isContentEditable property to test the computed Boolean value of this property.