仅允许 td 中的数字，其中 contenteditable = true

Question

我对这个简单的部分失去了理智。 我有一个包含 20 多个列的表格，其中一些列是可编辑的，有些则不是。

我现在需要的是，当用户添加新行时，他被迫只在几个单元格中写数字。 到目前为止，我尝试了这里的示例：
只接受 td 中的数字
使用 isNumeric() 接受数字
他们两个都没有工作

它只有在我调用整个表上的函数时才有效。 但这是不可用的，因为还有一些单元格也应该接受 String 值。

 $("#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>

这个特定的代码在这里（在 Stackoverflow 上）不起作用，因为第一个链接的脚本不包括在内：（但如果我将它添加到我现有的代码中，将会）

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

但是，如果我在我的代码中插入脚本部分，那么日期选择器就会出现问题......我无法使用它......我的猜测是它可能很容易纠正但我无法理解出去 -。-

更新我设法纠正了它。 添加新行时我需要“唯一的数值”，在此之前它是无用的。 所以我在“添加行”函数中添加了这个函数，现在它可以工作了。 谢谢大家的帮助

Answer 1

试试这个..

 $(".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>

Answer 2

当输入的字符不是数字时，我们必须避免/跳过当前事件的处理。

假设粘贴事件不是问题，您可以使用正则表达式测试输入的字符，如下所示：

 $("#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>

Answer 3

您可以使用keydown上的正则表达式检查该值。 注意parseInt。 如果出于某种原因，数字键确实变成了字符串。

 function checkIfNumber(value) { let num = parseInt(value); let reg = /^\\d+$/; return reg.test(num); } console.log(checkIfNumber('5')); console.log(checkIfNumber('hello')); 

Answer 4

我设法纠正了它。 添加新行时我需要“唯一的数值”，在此之前它是无用的。 所以我在“添加行”函数中添加了这个函数，现在它可以工作了。 谢谢大家的帮助