如何将最大长度设置为 HTML "td" 标签（单元格）？

Question

我有一个 HTML table 和 editable 单元格（我的 table 中的每个 td 标签都将“contenteditable”设置为 True） .

用户需要用 HH:mm 格式的时间填充 table，所以我添加了一个 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 个（就像输入标签的“最大长度”属性一样），以及是否可以以某种方式限制用户输入两个数字，然后是一个“：”字符，然后是另外两个数字。 （即使设置最大长度已经很不错了）。

我还写了一个正则表达式来检查某些东西是否是 HH:mm 格式，但我认为它在这种情况下没有用，因为它只能在用户输入完整的五个字符后进行测试，对吗？

以防万一：

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

这里是JSFiddle

Answer 1

如果您已经使用 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;
        }

Answer 2

我接受@Ekk4rd 的回答，因为他确实让我走上了正确的轨道，但我仍然想 post 一个答案，其完成的代码完全匹配 [=25] =] 我在问题中提出的问题。这是：

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