如何在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.