如何将maxlength设置为HTML“ td”标签单元格？

问题描述

我有一个带有可编辑单元格的HTML表（表中的每个td标签都将“ contenteditable”设置为True）。

用户应该使用HH：mm格式的时间填充表格，因此我添加了onkeypress属性，该属性触发一个函数，该函数检查用户是否输入了数字或“：”字符以外的内容，并忽略了该内容如果是这样，就像这样：

HTML

<td contenteditable="true" onkeypress="return isNumberKey(event)"> </td>

JavaScript

function isNumberKey(evt){
            let charCode = (evt.which) ? evt.which : event.keyCode;
            if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode!=58)
                return false;
            return true;
        }

现在的问题是，用户可以输入5个以上的字符，并可以输入诸如“ 345：678”之类的内容。

我想知道是否有可能将他们可以在单元格中输入的字符数限制为5（就像输入标签的“ maxlength”属性一样），以及是否有可能以某种方式限制用户键入两个数字，然后是“：”字符，然后是另外两个数字。 （即使设置maxlength已经很不错了。）

我还写了一个Regex来检查HH：mm格式，但是在这种情况下我认为它没有用，因为只有在用户键入完整的五个字符之后才能进行测试，对吗？>

以防万一：

const timeRegex = RegExp("^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$");

这里是JSFiddle

解决方法

如果您已经使用JavaScript检查用户可以输入哪些字符到td中，那么为什么不将当前长度的功能以及其他字符也添加到功能中呢？

F.e。像这样：

function isNumberKey(evt){
            let charCode = (evt.which) ? evt.which : event.keyCode;
            if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode!=58)
                return false;
                
            var currentContent = evt.target.innerHTML;
            if (currentContent.length >= 5)
                return false;
                
            if (currentContent.length === 2 && charCode !== 58)
                return false;

            return true;
        }

,

我接受@ Ekk4rd的答案，因为他确实使我走上了正确的轨道，但我仍然想发布答案，并给出与问题完全符合的代码。在这里：

HTML

<td contenteditable="true" onkeypress="return isNumberKey(event)"> </td>

JavaScript

        function isNumberKey(evt){
            let charCode = (evt.which) ? evt.which : event.keyCode;
            console.log(evt.target.innerHTML);
            if (evt.target.innerHTML == "<br>" || evt.target.innerHTML == " <br>"){
                evt.target.innerHTML = "";
            }

            let currentContent = evt.target.innerHTML;

            if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode!=58){
                return false;
            }
            
            if (currentContent.length >= 5){
                return false;
            }
                
            if (currentContent.length === 2 && charCode !== 58){
                return false;
            }

            if (currentContent.length != 2 && charCode == 58){
                return false;
            }

            return true;
        }

这是JSFiddle