Задать вопрос
@Anvario0
javascript

Почему не работает onblur на textarea?

Задание:
Создайте div, который превращается в textarea, если на него кликнуть.

textarea позволяет редактировать HTML в элементе div.

Когда пользователь переводит фокус, textarea превращается обратно в div, и его содержимое становится HTML-кодом в div.

html:
<body>
    <div id="area"></div>
    <script src="site 2.js"></script>
</body>

JS:
area.onclick = function() {
  this.outerHTML = `<textarea id="area">${area.innerHTML}</textarea>`
}

area.onblur = function() {
  this.outerHTML = `<div id="area">${area.innerHTML}</div>`
}


С превращением в textarea проблем нет, а вот обратно в div не превращается
  • Вопрос задан
  • 273 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 2
rc-dm
@rc-dm
Full-Stack Web Developer
Вот решение твоей задачи.
Дело в том что ты пытаешься повесить событие "onblur" на ещё не существующий элемент.

<div onclick="transformToTextarea(this);" style="width: 50px; height: 50px; background-color: blue;"></div>

function transformToTextarea(el) {
  el.outerHTML = '<textarea onblur="transformToDiv(this);">' + el.innerHTML + '</textarea>';
}
function transformToDiv(el){
  el.outerHTML = '<div onclick="transformToTextarea(this);">' + el.value + '</div>';
}

В данном случае заранее объявлено две функции, а в событии через атрибуты самого элемента указывается их вызов.
Ответ написан
5 комментариев
5 комментариев
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
Что логично, так как этого элемента не существовало на момент когда вешалось событие. В онклик добавьте создание события онблур для только что созданного элемента. И наоборот )
Ответ написан
4 комментария
4 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Смонтировать видео
23 нояб. 2024, в 01:31
1000 руб./за проект
Настроить сайт
23 нояб. 2024, в 00:16
2000 руб./за проект
Разобрать текущий ETL-процесс
22 нояб. 2024, в 23:55
3000 руб./за проект
Ещё заказы