CODEWITHSUNDEEP
javascripthtmlhtml-tablecontenteditable
Shiverz
Shiverz

Reputation: 688

How could I set a maxlength to an HTML "td" tag (cell)?

I have a HTML table with editable cells (every td tag in my table has "contenteditable" set to True).

The users are meant to fill the table with times in HH:mm format, so I added an onkeypress attribute which triggers a function that checks if the user is entering something other than numbers or the ":" character, and ignores it if that's the case, like so:

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;
        }

The problem now is that users can enter more that 5 characters and write stuff like "345:678" for example.

I would like to know if its possible to limit the number of characters they can enter in the cell to 5 (just like an input tag's "maxlength" attribute), and if it's possible to somehow limit the users to typing two numbers, then a ":" character, then two more numbers. (Even though setting a maxlength would already be pretty nice).

I also wrote a Regex which checks that something is the HH:mm format, but I don't think it's useful in this case since it can only be tested after the user has typed the full five characters, right?

Here it is just in case:

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

Here is the JSFiddle

Upvotes: 0

Views: 625

Answers (2)

Shiverz
Shiverz

Reputation: 688

I'm accepting @Ekk4rd 's answer because he really put me on the right track but I still wanted to post an answer with the finished code that matches exactly what I asked in the question. Here it is:

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;
        }

Here is the JSFiddle

Upvotes: 0

Ekk4rd
Ekk4rd

Reputation: 144

if you already do the checking which characters a user can input into the td with javascript, so why don't just also add the functionality for the current length and other characters to the function too ?

F.e. like this:

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;
        }

Upvotes: 2

Related Questions