How do I set a max length of a string in a conteneditable table in HTML?
Question
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!
2 answers
solution1
2 ACCPTED 2016-12-09 03:17:50
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>
solution2
2 2016-12-09 03:32:04
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I set a max length for a string value in a XML file?
Max string length of html element
How Do I Convert an HTML String to a Table?
How to set a min and max character length on a HTML textbox using Javascript
How do I set a fixed number of rows for a HTML table?
How do I convert a HTML table object to a string?
How do I find the physical length of a string?
Max length for HTML <textarea>
Set element max length
How do you move the caret to a specific character offset inside a conteneditable element
Related Tags