Замена div на textarea

@Esso11 · Регистрация: 20.08.2017

Студворк — интернет-сервис помощи студентам

Доброе время суток коллеги, изучая JS наткнулся на задачку:
Создать html-страницу для отображения/редактирования текста.
При открытии страницы текст отображается с помощью тега
div. При нажатии Ctrl+E, вместо div появляется textarea с тем
же текстом, который теперь можно редактировать. При нажатии
Ctrl+S, вместо textarea появляет div с уже измененным текстом.
Не забудьте выключить поведение по умолчанию для этих сочетаний клавиш.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
 <head>
  <meta charset="utf-8">
  <title>the Name</title>
 </head>
 <body>
 Нажмите  Ctrl+Z для редактирования текста<br/>
Нажмите  Ctrl+S для сохранения текста
<hr align="left" width="1000" size="2" color="#ff0000" />
<div>
 
Практический опыт показывает, что дальнейшее развитие различных форм деятельности позволяет выполнить важнейшие задания по разработке всесторонне сбалансированных нововведений. Разнообразный и богатый опыт сложившаяся структура организации влечет за собой процесс внедрения и модернизации форм воздействия! Повседневная практика показывает, что новая модель организационной деятельности играет важную роль в формировании модели развития?
 
Таким образом, сложившаяся структура организации играет важную роль в формировании всесторонне сбалансированных нововведений.
 
С другой стороны сложившаяся структура организации требует определения и уточнения ключевых компонентов планируемого обновления! Не следует, однако, забывать о том, что реализация намеченного плана развития влечет за собой процесс внедрения и модернизации системы масштабного изменения ряда параметров! С другой стороны реализация намеченного плана развития требует определения и уточнения дальнейших направлений развития проекта!
 
Значимость этих проблем настолько очевидна, что постоянное информационно-техническое обеспечение нашей деятельности требует от нас анализа системы обучения кадров, соответствующей насущным потребностям. Соображения высшего порядка, а также новая модель организационной деятельности играет важную роль в формировании направлений прогрессивного развития? Задача организации, в особенности же консультация с профессионалами из IT обеспечивает актуальность направлений прогрессивного развития! Разнообразный и богатый опыт консультация с профессионалами из IT представляет собой интересный эксперимент проверки соответствующих условий активизации. С другой стороны повышение уровня гражданского сознания обеспечивает актуальность экономической целесообразности принимаемых решений. Значимость этих проблем...
</div>
<script>
function KeyPress(e){
     // Ensure event is not null
     e = e || window.event;
 
     if ((e.which == 90 || e.keyCode == 90) && e.ctrlKey) {
         // Ctrl + Z
         // Do Something
     }
}           
 
</script>
 
 </body>
</html>

Вопрос у меня такой правильно ли я задал условие для события нажатия сочитания клавиш и как мне заменить сам тег div
на тег textarea

@amr-now · 18.03.2019, 21:21

Доброго времени суток.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
        document.body.addEventListener("keydown", keyPress);
 
        function keyPress(e) {
            if ((e.code === "KeyS" || e.code === "KeyE") && e.ctrlKey) {
                e.preventDefault();
                let el = document.querySelector("hr").nextElementSibling;
                if (e.code === "KeyS" && el.nodeName === "TEXTAREA") {
                    let newEl = document.createElement("div");
                    newEl.textContent = el.value; // Исправил
                    el.replaceWith(newEl);
                }
                else if (e.code === "KeyE" && el.nodeName === "DIV") {
                    let newEl = document.createElement("textarea");
                    newEl.textContent = el.textContent;
                    el.replaceWith(newEl);
                }
            }
        }

@Esso11 · 19.03.2019, 02:05 **[ТС]**

amr-now, простите, а можно комментарии к вашему коду?

@amr-now · 19.03.2019, 08:05

Можно. Все комментарии находятся в онлайн-учебнике:
http://learn.javascript.ru
Начинайте читать и выполнять домашние задания.

Что будет непонятно из учебника, пишите. Поясним.

@Esso11 · 19.03.2019, 14:53 **[ТС]**

amr-now, спасибо, не пойму где в этом учебнике домашние задания?

@amr-now · 06.04.2019, 12:59

Esso11, здравствуйте.

Сообщение от Esso11

не пойму где в этом учебнике домашние задания?

Открываем страницу

Документ, события, интерфейсы -> Формы, элементы управления -> Фокусировка: focus/blur

https://learn.javascript.ru/focus-blur

Читаем домашнее задание:

Горячие клавиши

важность: 5
Создайте <div>, который при нажатии Ctrl+E превращается в <textarea>.
Изменения, внесенные в поле, можно сохранить обратно в <div> сочетанием клавиш Ctrl+S, при этом <div> получит в виде HTML содержимое <textarea>.
Если же нажать Esc, то <textarea> снова превращается в <div>, изменения не сохраняются.

Кстати, тут действительно "Не забудьте выключить поведение по умолчанию для этих сочетаний клавиш." Иначе Опера будет вести себя странно.

Вот например решение с современным свойством e.code:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #view,
        #area {
            height: 150px;
            width: 400px;
            font-family: sans-serif;
            font-size: 14px;
        }
 
        #view {
            /* padding + border = 3px */
 
            padding: 2px;
            border: 1px solid black;
        }
 
        #area {
            display: none;
            /* replace padding with border (still 3px not to shift the contents) */
 
            border: 3px groove blue;
            padding: 0px;
        }
 
        #area:focus {
            outline: none;
            /* remove focus border in Safari */
        }
    </style>
</head>
 
<body>
    <ul>
        <li>Ctrl-E to start editing.</li>
        <li>While editing: Ctrl-S to save, Esc to cancel.</li>
    </ul>
    <textarea id="area"></textarea>
    <div id="view">Text</div>
    <script>
        let view = document.getElementById("view"),
            area = document.getElementById("area");
        document.body.onkeydown = keyHandler;
 
        function keyHandler(e) {
            if (e.ctrlKey && (e.code === "KeyS" || e.code === "KeyE")) {
                e.preventDefault();
                if (e.code === "KeyS") {
                    if (area.style.display) {
                        area.style.display = "";
                        view.style.display = "block";
                        view.textContent = area.value;
                    }
                }
                else {
                    if (!area.style.display) {
                        area.style.display = "block";
                        view.style.display = "none";
                        area.value = view.textContent;
                    }
                }
            }
            if (e.code === "Escape" && area.style.display) {
                area.style.display = "";
                view.style.display = "block";
            }
        }
    </script>
</body>
</html>

Здесь можно применить хитрость, что у <textarea> во внешнем CSS указано display:none
Соответственно, если непосредственно в стиле самого элемента <textarea> пусто, то редактор скрыт, иначе - мы в режиме редактирования.

Добавлена реакция на Esc - выход из редактора без сохранения. Если не надо, то условие if (e.code === "Escape" && area.style.display) можно не учитывать.

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@Esso11 5 / 5 / 0 Регистрация: 20.08.2017 Сообщений: 685
	19.03.2019, 02:05 [ТС]
	amr-now, простите, а можно комментарии к вашему коду? 0

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	19.03.2019, 08:05
	Можно. Все комментарии находятся в онлайн-учебнике: http://learn.javascript.ru Начинайте читать и выполнять домашние задания. Что будет непонятно из учебника, пишите. Поясним. 0

@Esso11 5 / 5 / 0 Регистрация: 20.08.2017 Сообщений: 685
	19.03.2019, 14:53 [ТС]
	amr-now, спасибо, не пойму где в этом учебнике домашние задания? 0