Замена 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) можно не учитывать.

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@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