如何在HTML的可编辑表中设置字符串的最大长度？
[英]How do I set a max length of a string in a conteneditable table in HTML?
问题描述
我目前正在做一个词搜索工具，但出现了一个问题。 问题是我正在使用具有contenteditable的表，但是如何设置最大字符串长度。 我已经试过了
maxlength="1"
谁能帮忙！
#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>
运行代码段时，请全屏显示。
请，如果有任何方法，请尝试避免使用jquery！
2 个解决方案
解决方案1
2 已采纳 2016-12-09 03:17:50
您可以将其更改为输入，或使用以下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>
解决方案2
2 2016-12-09 03:32:04
您可以使用javascript来做到这一点：
例：
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>
如何使用Javascript在HTML文本框中设置最小和最大字符长度
[英]How to set a min and max character length on a HTML textbox using Javascript
如何将插入符号移动到可竞争元素内的特定字符偏移处
[英]How do you move the caret to a specific character offset inside a conteneditable element
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.