allow only numeric in td where contenteditable = true

Question

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>

This particular code will not work here (on Stackoverflow) because the script from the first link is not included: (but will if I add it to my existing code)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

But if I insert the script part in my code there is a problem with the date picker then... and I can't use it... My guess is that it is probably something simple to correct but I can't figure it out -.-

UPDATE 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

why don't you use your class `allow_only_numbers` to be the one that receive the `keydown` listener? That way only the `td` with this class will be number only, the others will be normal — Calvin Nunes, Nov 29 '19 at 13:18
It works here since you added the script part in the snippet. I used it without this specific script and it worked on whole table , but not when I use it on specific class. If I do add this script to my code I get this `Uncaught TypeError: $(...).find(...).datepicker is not a function` — miwa_p, Nov 29 '19 at 13:26
Which script above? The link? If yes, it's just the jQuery script, something here is not making sense at all... because you are talking about problem with number only on `td`but when you add jQuery you get a datepicker error on an undefined object... — Calvin Nunes, Nov 29 '19 at 13:30
sorry if I wasn't clear ,.. yes I mean the jQuery link.. I already have some other links written in head..in each line there is also a datepicker (so a user can choose date).. before inserting the jquery link, the function worked only on whole table, but not on the specific **td** ... when I do try to add the jQuery link I get that error — miwa_p, Nov 29 '19 at 13:35
So please, based on the error you are saying you have, [edit] your question to show where the problem occurs, add a [mcve] with your current real code, because people below are answering based on one information, but your real problem is other, it's not about numbers on a td, but with some scripts and datepicker. — Calvin Nunes, Nov 29 '19 at 13:37

hbamithkumara · Accepted Answer · 2019-11-30T08:39:36.833

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>

I had to change my code - but your code helped in order to make it more strict . thank you for your help — miwa_p, Dec 02 '19 at 13:01

score 1 · Answer 2 · answered Nov 29 '19 at 13:28

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>

score 0 · Answer 3 · answered Dec 02 '19 at 12:59

0

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

answered Dec 02 '19 at 12:59

miwa_p

435
1
4
19

allow only numeric in td where contenteditable = true

3 Answers3