Как реализовать отмена/вперёд через JS

[MC-XOBAHCK]

наверное API, а не IP

Да, API. Я в чужом тексте наверное увидел бы и заметил, а когда сам писал даже не задумывался и вряд ли когда обнаружил бы такой прокол.

Спасибо! Это именно то что мне нужно.

[MC-XOBAHCK]

zzz.onclick = e => document.execCommand('undo');
yyy.onclick = e => document.execCommand('redo');

А можно спросить, часто здесь и в учебнике вижу в коде как дом-элементы по id пишут в короткой форме:
zzz.onclick и yyy.onclick

Так можно всегда писать или это примочки сайта, а в коде следует писать document.querySelector('#zzz')

[j0hnik]

MC-XOBAHCK,
http://w3c.github.io/html/browsers.h...-window-object
браузеры поддерживают, но в боевом коде рекомендуют по старинке.

[рони]

MC-XOBAHCK,
j0hnik,
ввожу четыре символа, как мне вернутся к состоянию, когда было 2 символа, а затем когда было 3?

[j0hnik]

рони,

<textarea id="text"></textarea>
	<button id="zzz">ctrl+Z</button>
	<button id="yyy">ctrl+Y</button>
	<script>

		text.oninput = e => {
			text.blur();
			text.focus();
		};
		zzz.onclick = e =>document.execCommand('undo');
		yyy.onclick = e => document.execCommand('redo');
</script>

[рони]

j0hnik,

[Malleys]

Если использовать стандартное сочетание Command-Z, то оно откатит вас к состоянию, когда вы сфокусировались на элементе. Command-Shift-Z возвратит к исходному. Чтобы это происходило по одному символу, нужно потерять и сразу возвратить фокус. Но действительно ли это нужно? Я считаю, что это усложнение. Мне показалось, что по словам лучше, наверное для разных целей подойдёт разный откат.

<button onclick="document.execCommand('undo')">Отменить</button>
<button onclick="document.execCommand('redo')">Возвратить</button>
<p>
  <textarea oninput="" placeholder="Стандартный откат"></textarea>
  <textarea oninput="this.blur();this.focus();" placeholder="по одному символу"></textarea>
  <textarea oninput="if(/[\s,.!?]/.test(event.data)) { this.blur();this.focus(); }" placeholder="по слову"></textarea>
</p>

Кнопки должны быть рядом с текстовым полем, или более точней они должны быть в поле видимости, ведь во время отката, фокус может переместиться с кнопки на элемент, а на планшете или телефоне нет возможности нажать Command-Z. Я к тому, что на сенсорных устройствах может не быть возможности совершить такой откат, кроме того, чтобы нажать на нашу придуманную кнопку.

часто здесь и в учебнике вижу в коде как дом-элементы по id пишут в короткой форме

В стандарте HTML 5.2 о поимённом доступе к элементам сказано:

Возвращает указанный элемент или коллекцию элементов.
Как правило, полагаясь на это, вы получите ломающийся код. То, какие идентификаторы перестанут подходить к этому API, может меняться со временем, так как, например, новые функции добавляются к веб-платформе. Вместо этого используйте document.getElementById() или document.querySelector ().

Например, если у вашего элемента идентификатор alert, то он не может быть получен при помощи этого API, поскольку функция с соответствующим именем уже определена в глобальном контексте. (alert-у присвоена именно функция)

Важно понимать, что это происходит именно из-за того, что идентификаторы в глобальном контексте используются, где может произойти конфликт с другими, уже назначенными свойствами объекта window.

Конечно это можно исправить...

for(const element of document.querySelectorAll("[id]")) {
	window[element.id] = element;
}

Но лучше поимённый доступ к элементам сделать не через глобальный объект, а через свой. И даже гарантированно будет работать

в боевом коде

const $ = {};

for(const element of document.querySelectorAll("[id]")) {
	$[element.id] = element;
}

// пример
$.zzz.onclick = e => document.execCommand('undo');
$.yyy.onclick = e => document.execCommand('redo');

Правда, классно?

Или даже так...

const $ = new Proxy({}, { get(_, id) { return document.getElementById(id) } });

// пример
$.zzz.onclick = e => document.execCommand('undo');
$.yyy.onclick = e => document.execCommand('redo');

Вообще супер, правда?

[MC-XOBAHCK]

Кнопки должны быть рядом с текстовым полем, или более точней они должны быть в поле видимости

У меня при фокусе на элементе сделана подсветка через стили, поэтому я потерю фокуса сразу увидел и осознал. Кнопки сделал так как вы говорите - в поле видимости и в кастомном контекстном меню на элементе.

Правда, классно?

Да

Вообще супер, правда?

Правда.

Я так смотрю на этот код и если правильно понимаю, то во всём этом есть своя определённая выгода, пока непонятная мне. Прописать querySelector('#') меня не обременяет.
Наверное это очень удобно применять на элементы сгенерированные приложением.

После вашего решения с объединением ячеек, я как по щелчку внезапно для себя перешёл с функционального стиля написания кода на объектно-ориентированный. Теперь у меня всё по полочкам. Внедрить в приложение данное решение теперь для меня сущий пустяк. Буду пробовать и осознавать в чём выгода.