如何將 maxlength 設置為 HTML“td”標簽（單元格）？

Question

我有一個帶有可編輯單元格的 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

Answer 1

如果您已經檢查了用戶可以使用 javascript 將哪些字符輸入到td ，那么為什么不將當前長度和其他字符的功能也添加到函數中呢？

Fe像這樣：

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 的回答，因為他確實讓我走上了正確的軌道，但我仍然想發布一個與我在問題中所問的完全匹配的完成代碼的答案。 這里是：

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