将 <p> 标签变成文本区域

Question

我试图用js为我的wiki做一些东西，当你点击文本时，它会将其变成带有按钮的文本区域，当你点击按钮时，它会更新文本。

我尝试添加按钮来更改 div 值，但它不起作用。

Answer 1

您可以在单击时隐藏段落元素，并在其后面添加文本区域和按钮。然后为按钮分配一个事件侦听器以更新段落的

textContent

并再次显示。

一个基本示例：

document.querySelector('p').addEventListener('click', function(e) {
  // Consider putting these two elements in a container
  const textarea = document.createElement('textarea'),
    btn = document.createElement('button');
  textarea.value = this.textContent;
  btn.textContent = 'Save';
  btn.addEventListener('click', () => {
    this.textContent = textarea.value;
    this.style.display = '';
    textarea.remove();
    btn.remove();
  });
  this.style.display = 'none';
  this.after(textarea, btn);
});

<p>Some text</p>

Answer 2

您可以简单地使用

contenteditable

属性

const 
  p_EditOnOff = document.querySelector('p')
, btn_EditOff = document.querySelector('#btn-EditOff')
  ;

p_EditOnOff.addEventListener('click', () =>
  {
  if ( p_EditOnOff.contentEditable === 'true') return;
  p_EditOnOff.contentEditable = true;
  btn_EditOff.classList.toggle('noDisplay',false);
  
  p_EditOnOff.focus();
  })

btn_EditOff.onclick =_=>
  {
  btn_EditOff.classList.toggle('noDisplay',true);
  p_EditOnOff.contentEditable = false;
  }

.noDisplay {
  display: none;
}

p[contenteditable="false"] {
  cursor: pointer;
}

<p contenteditable="false">Some text</p>

<button id="btn-EditOff" class="noDisplay"> end edit </button>