Цитата:
Спасибо! Это именно то что мне нужно. |
zzz.onclick = e => document.execCommand('undo'); yyy.onclick = e => document.execCommand('redo'); А можно спросить, часто здесь и в учебнике вижу в коде как дом-элементы по id пишут в короткой форме: zzz.onclick и yyy.onclick Так можно всегда писать или это примочки сайта, а в коде следует писать document.querySelector('#zzz') |
MC-XOBAHCK,
http://w3c.github.io/html/browsers.h...-window-object браузеры поддерживают, но в боевом коде рекомендуют по старинке. |
MC-XOBAHCK,
j0hnik, ввожу четыре символа, как мне вернутся к состоянию, когда было 2 символа, а затем когда было 3? |
рони,
<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,
:) |
Если использовать стандартное сочетание 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. Я к тому, что на сенсорных устройствах может не быть возможности совершить такой откат, кроме того, чтобы нажать на нашу придуманную кнопку. Цитата:
Цитата:
Важно понимать, что это происходит именно из-за того, что идентификаторы в глобальном контексте используются, где может произойти конфликт с другими, уже назначенными свойствами объекта 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'); Вообще супер, правда? |
Цитата:
Цитата:
Цитата:
Я так смотрю на этот код и если правильно понимаю, то во всём этом есть своя определённая выгода, пока непонятная мне. Прописать querySelector('#') меня не обременяет. Наверное это очень удобно применять на элементы сгенерированные приложением. После вашего решения с объединением ячеек, я как по щелчку внезапно для себя перешёл с функционального стиля написания кода на объектно-ориентированный. Теперь у меня всё по полочкам. Внедрить в приложение данное решение теперь для меня сущий пустяк. Буду пробовать и осознавать в чём выгода. |
Часовой пояс GMT +3, время: 13:45. |