Как сделать если фокус пропадает элемент становился прежним?

Question

let a = document.querySelector('.a');
a.addEventListener('click', () => {
  if(a.tagName = 'DIV'){
    console.log(true);
    a.insertAdjacentHTML('beforebegin', '<textarea>');
    a.remove();
  } 
 
});

 a.onblur = function(){
  a.insertAdjacentHTML('beforebegin', '<div></div>');
  a.remove();
}

.a{
  border: 1px solid #000;
  width: 300px;
  height: 100px;
}
textarea{
  border: 3px solid blue;
  width: 300px;
  height: 100px;
  padding: 0;
}

<div class="a"></div>

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

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

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

Answer 1

let a = document.querySelector('.a');
let t = document.querySelector('textarea.b');
a.addEventListener('click', () => {
  t.classList.remove("hide");
  a.classList.add("hide");
  t.focus();
});

t.onblur = function(){
  t.classList.add("hide");
  a.classList.remove("hide");
}

.a{
  border: 1px solid #000;
  width: 300px;
  height: 100px;
}

textarea{
  border: 3px solid blue;
  width: 300px;
  height: 100px;
  padding: 0;
}

.hide {
  display: none;
}

<div class="a"></div>
<textarea class="b hide"></textarea>

БЛОГ НА HUSL

Как сделать если фокус пропадает элемент становился прежним?

Ответы (1 шт):