Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 21.10.2019, 17:37
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,263

Сообщение от Ruru
Там где не заполнены нам нужно написать число от 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>


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

Последний раз редактировалось Malleys, 21.10.2019 в 17:59.
Ответить с цитированием
  #12 (permalink)  
Старый 21.10.2019, 20:39
Новичок на форуме
Отправить личное сообщение для Ruru Посмотреть профиль Найти все сообщения от Ruru
 
Регистрация: 19.10.2019
Сообщений: 6

Спасибо!


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

Последний раз редактировалось Ruru, 21.10.2019 в 20:41.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Загрузка маски ввода Intrerio Общие вопросы Javascript 0 01.03.2016 18:47
Ограничение ввода с помощью блока submit Pavel.zol Events/DOM/Window 9 14.12.2011 22:42
Зависимость полей ввода sakutylev AJAX и COMET 6 07.01.2011 17:10
Ограничение символов для ввода kotofeich Элементы интерфейса 9 04.06.2010 17:01
Переход между окнами ввода при заполнении. Бушка Общие вопросы Javascript 4 25.03.2009 15:40