ограничение ввода Maxlength

[Malleys]

Там где не заполнены нам нужно написать число от 1 до 9

Добавил, что редактировать можно только те ячейки, которые не заполнены изначально!

<style>
	table {
		border-collapse: collapse;
	}
	td {
		border: 1px solid #ddd;
		padding: 6px;
		min-width: 16px;
		text-align: center;
	}
	td[contenteditable] {
		box-shadow: inset 0 0 100px aliceblue;
	}

</style>

<table>
	<tr><td>1</td><td>2</td><td></td></tr>
	<tr><td>4</td><td></td><td>6</td></tr>
	<tr><td></td><td></td><td>9</td></tr>
</table>

<script>

	for(const cell of document.querySelectorAll("td:empty")) {
		cell.tabIndex = 0;
		cell.contentEditable = true;
		cell.dataset.value = cell.textContent;
	}

	document.addEventListener("input", ({ target }) => {
		let value = target.textContent.replace(target.dataset.value, "");
		value = value || target.textContent;
		value = value.replace(/[^1-9]/g, "").slice(0, 1) || target.dataset.value;
		value = target.textContent === "" ? "" : value;

		target.textContent =
		target.dataset.value =
			value;
	});
</script>

ЕЩЁ Добавил пример стиля для редактируемой ячейки.

[Ruru]

Спасибо!


*позже еще вариант нашла:

let editable = document.querySelectorAll('td[contenteditable="true"]');
 
editable.forEach(e => {
    e.oninput = function() {
        this.innerText = this.innerText.replace(/[^\d]/, '').substring(0, 1);  // ограничиваем длину и разрешаем только цифры
    }
});