Accept Number only in editable column td html

Question

I have problem with validate number only in editable column for my table. so here my html code:

<table>
<tr>
<td contenteditable='true' name="presentase"></td>
</tr>
</table>

and this my js for number only:

<script type="text/javascript">>
 $(".allow_only_numbers").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>

how to make the column can input number only on that "td" tag. where should i place the ".allow_only_numbers" in the column tag ?

so help me to solve this. thank you

You talk about "editable column", yet in your HTML you wrote `contenteditable='false'`. Please correct or explain more. — yqlim, Mar 21 '19 at 04:31

BeeBee8 · Accepted Answer · 2019-03-21T05:54:08.650

You can just put allow_only_numbers class to td

also your contenteditable needs to be true

$(".allow_only_numbers").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 border="1" width="100px" height="50px">
<tr>
<td class="allow_only_numbers" contenteditable='true' name="presentase"></td>
</tr>
</table>

score 0 · Answer 2 · answered Mar 21 '19 at 05:11

you can even use formatter in table like the below code use a function to render the value in table

 <th data-field="DELETE_DOWNLOAD" data-align="center" data-formatter="deleteFileFormatter"></th>

where deleteFileFormatter is the function where value returned from the function will go to the table

Accept Number only in editable column td html

2 Answers2

Linked