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

Подскажите пожалуйста, у меня есть таблица, некоторые ячейки открываются для ввода (рандомно), мне нужно чтобы туда можно было ввести только 1 цифру с 1 до 9.
Желательно сделать это через JS.

Я пробовала пройти по нужным мне ячейкам в джаве и сделать:

tbl.rows[i].cells[j].maxLength='1';

но это не работает.

пробовала в самой таблице в html сделать:

<tr>
<td id='c0'class="my-td"maxLength='1'></td>
<td id='c1'class="my-td"maxLength='1'></td>
<td id='c2'class="my-td"maxLength='1'></td>
</tr>

но также никакого эффекта...

contentEditable?

<style>
table {
    border-collapse: collapse;
}
td {
    border: 1px solid #ddd;
    padding: 6px;
}
</style>


<table>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td><td>9</td></tr>
</table>


<script>
var tbl = document.querySelector('table');

tbl.addEventListener('mousedown', function(e) {
    e.target.contentEditable = e.target.contentEditable=="inherit" || e.target.contentEditable=="false" ? true : false 
});

tbl.addEventListener('input', function(e) {
    e.target.textContent = e.target.textContent.replace(/\D|0/,'').replace(/(\d)\d+/,'$1') 
});
</script>

laimas, иногда можно вводить, а иногда не можно, если нажимать мышкой!

Притом только с клавиатуры вообще нельзя вводить! (ЕЩЁ притом, если сначала нажимать мышкой, то потом можно вводить только с клавиатуры в те ячейки, на которые нажимали мышкой)

Если нажать мышкой так, чтобы каретка появилась после цифры в таблице, и нажать на число на клавиатуре, то число не вводится, а каретка перескакивает в начало ввода!

Если вставить или перетащить текст, то из него удаляется первый не цифровой символ, а остальное вставляется как есть! Тоже самое происходит при голосовом вводе.

Если выделить ввод и ввести не цифру, то всё исчезнет!

Malleys,
естественно, ибо
если заниматься позицией курсора, то так просто не получится,
если еще и копирование учитывать, то нужно обрабатывать и это событие,
если не цифровой ввод анализировать "а чем?", то надо определить чем менять,
и прочие возможные если.
А пример все лишь отвечает на вопрос, что у td нет и не может быть никакого maxLength, который бы сам по себе на что-то влиял.

Конечно нет, речь о вашем решении.

Для этого подходит событие input, которое вы обрабатываете.

Вам это не нужно, поскольку Я так понимаю, любым способом!

<style>
	table {
		border-collapse: collapse;
	}
	td {
		border: 1px solid #ddd;
		padding: 6px;
	}
</style>

<table>
	<tr><td>1</td><td>2</td><td>3</td></tr>
	<tr><td>4</td><td>5</td><td>6</td></tr>
	<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

<script>
	const table = document.querySelector("table");

	for(const cell of table.querySelectorAll("td, th")) {
		cell.tabIndex = 0;
		cell.contentEditable = true;
		cell.dataset.value = cell.textContent;
	}

	table.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;

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

laimas, любое иное нажатие не должно менять исходный ввод, так ведь?

Вы меня об этом спрашиваете? Я даже не знаю что вообще находится в ячейках по умолчанию, это не ко мне вопрос.

По сути должно ничего или цифра от 1 до 9. Однако, чтобы там не находилось, оно не должно сломаться, а вводиться должны только цифры от 1 до 9!

Ну и на что менять не цифру, если ее нет, как просто не удаляя? Контактируйте с "заказчиком" о всех деталях, я не в курсе их. О курсоре, пойдет ли игнорирование его позиции (у вас это тоже) или нет и о прочем. Мне в общем все равно, не мне же нужно это. ;)

Ничего не трогать! Ведь если предполагается ввод от 1 до 9, то любые другие клавиши ведут себя так, как будто их не нажимали!

А какая разница, где стоит каретка, если самое большое можно ввести один символ! Нужно, чтобы произошёл ввод, а у вас он не происходит!

Для кого тогда ваш пример? Чему мы можем научится из вашего примера?

Вы как то усложнили до небес. Это судоку, часть ячеейк заполнена автоматически (их нельзя изменять) часть нет. Там где не заполнены нам нужно написать число от 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>

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

Спасибо!


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

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