Задать вопрос
@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 не превращается
  • Вопрос задан
  • 234 просмотра
Комментировать
Подписаться 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 разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Developer (backend / fullstack)
Brightdata • Тель-Авив
от 5 500 до 6 500 $
Ещё вакансии
Заказы с Хабр Фриланса
Конвертировать ключи в аккаунты whatsapp
09 мая 2024, в 00:49
1000 руб./за проект
Доработать игрового телеграмм бота python, telethon
08 мая 2024, в 23:13
4000 руб./за проект
Верстка лендинга из фигмы
08 мая 2024, в 22:04
500 руб./за проект
Ещё заказы