如何在删除现有内容后显示texarea的innerHTML

Question

我试图隐藏和显示基于焦点和模糊的文本区域的innerHTML。它运行良好。但问题是，当我删除输入的文本时，内部的innerHTML已经存在于元素中，但它没有显示出来。以下是问题复制步骤：

1. 在文本区域内输入文本
2. 选择所有文本并将其删除
3. 然后将鼠标从文本区域移出
4. innerHTML在浏览器中不可见
5. 但是当我使用浏览器检查元素时，innerHTML在元素中是可见的

let textarea = document.querySelectorAll("textarea");
for (i = 0; i < textarea.length; i++) {
let innertext = textarea[i].innerHTML;
textarea[i].addEventListener("focus", (e) => {
e.target.innerHTML = "";
})
textarea[i].addEventListener("blur", (e) => {
e.target.innerHTML = innertext;
})
}

<textarea name="" id="" cols="30" rows="10">Test</textarea>

Answer 1

使用.value而不是.innerHTML来更改/检索textarea的值。一旦对textarea的内容进行了更改，innerHTML属性就不会在浏览器中更新。

let textarea = document.querySelectorAll("textarea");
for (i = 0; i < textarea.length; i++) {
let innertext = textarea[i].innerHTML;
textarea[i].addEventListener("focus", (e) => {
e.target.value = "";
})
textarea[i].addEventListener("blur", (e) => {
e.target.value = innertext;
})
}

<textarea name="" id="" cols="30" rows="10">Test</textarea>

Answer 2

此解决方案使用占位符：

<textarea name="" id="" cols="30" rows="10" placeholder='Test'></textarea>

let textarea = document.querySelectorAll("textarea");
for(i=0;i<textarea.length;i++) {
let innertext = textarea[i].placeholder;
textarea[i].addEventListener("focus",(e)=>{
console.log( e.target.placeholder);
e.target.placeholder = '';
});
textarea[i].addEventListener("blur",(e)=>{
e.target.placeholder = innertext;
})
}