我试图用js为我的wiki做一些东西,当你点击文本时,它会将其变成带有按钮的文本区域,当你点击按钮时,它会更新文本。
我尝试添加按钮来更改 div 值,但它不起作用。
您可以在单击时隐藏段落元素,并在其后面添加文本区域和按钮。然后为按钮分配一个事件侦听器以更新段落的
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>
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>