我目前一直在做一個詞搜索製造商,但我發生了一個問題。問題是我使用了contenteditable表,但是如何設置最大字符串長度。我已經嘗試過如何在HTML中的可調度表中設置字符串的最大長度?
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!
當然,你可以創建一個更小的例子? (12x12桌子向我們展示的是4x4桌子不會怎麼樣?) – nnnnnn
我真的不認爲'contenteditable'是去這裏的路。如果您想要輸入的行爲(例如'maxlength'屬性)使用輸入。 –
@Corey Ogbum我已經試過了,但對我來說沒有運氣,因爲寬度和高度不會跟隨我嘗試過的CSS。儘管現在,我有點放棄了這一點。 – Supercolbat