Supercolbat
Reputation: 321
How do I set a max length of a string in a conteneditable table in HTML?
I have currently been making a word search maker, but I have occurred a problem. The problem is that I'me using a table with contenteditable, but how do I set a max string length. I already tried
maxlength="1"
Can anyone please help!
#editor {
background-color: turquoise;
}<table border="1" id="editor" width="500px" height="500px">
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
</table>When running to code snippet, please go fullscreen.
Please, if there are any ways, please try avoid jquery!
Upvotes: 1
Views: 1434
Answers (2)
Mati
Reputation: 1148
You can do it using javascript:
Example:
const table = document.querySelector('table');
const validateMaxLength = (event) => {
const textLength = event.target.textContent.length;
if ( textLength > 5) {
event.preventDefault();
}
}
table.addEventListener('keydown', validateMaxLength);#editor {
background-color: turquoise;
}<table border="1" id="editor" width="500px" height="500px">
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
</table>Upvotes: 2
StackSlave
Reputation: 10617
You can either change those to inputs, or use the following JavaScript
var pre = onload, doc, T, oneCharOnly; // change pre to another var if using technique on different page
onload = function(){
if(pre)pre();
doc = document;
T = function(n, e){
var w = e || doc;
return w.getElementsByTagName(n);
}
oneCharOnly = function(){
var tds = T('td');
for(var i=0,l=tds.length; i<l; i++){
tds[i].onkeyup = function(){
if(!this.innerHTML.match(/^.$/)){
this.contentEditable = false;
}
}
}
}
oneCharOnly(); // okay to use on other pages due to scope
}#editor {
background-color: turquoise;
}<table border="1" id="editor" width="500px" height="500px">
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
<tr>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
<td contenteditable="true"> </td>
</tr>
</table>Upvotes: 2
Related Questions
- How to set the maxlength of inputs inside table cells
- How do you limit the maxlength of inputs in an editable table using Tabulator?
- How could I set a maxlength to an HTML "td" tag (cell)?
- How to set a maximum length to the characters displayed in a <td>
- table length attribute converted to string returns nothing
- Removing the maxlength attribute
- Javascript maxLength on tag
- Setting the maxlength of text in an element that is displayed
- Setting the Max length in a <TD>
- Max string length of html element