В настоящее время я создаю средство поиска слов, но у меня возникла проблема. Проблема в том, что я использую таблицу с контентоспособной, но как установить максимальную длину строки. Я уже пыталсяКак установить максимальную длину строки в таблице с расширением в 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