删除现有内容后如何显示textarea的innerHTML答案

【问题标题】：How to show innerHTML of texarea after deleting existing content删除现有内容后如何显示textarea的innerHTML
【发布时间】：2021-06-30 10:25:23
【问题描述】：

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

在文本区域内输入文本
选择所有文本并删除它
然后将鼠标从文本区域移出
innerHTML 在浏览器中不可见
但是当我使用浏览器检查元素检查时，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;
  })
}

&lt;textarea name="" id="" cols="30" rows="10"&gt;Test&lt;/textarea&gt;

【问题讨论】：

第 4 步对我来说没有发生。但无论如何，代码中有一些奇怪的东西。当页面加载时，您在innerText 变量中捕获innerHTML，然后，每次文本区域模糊时，您都将旧值放回原处。您永远不会使用输入的值。另外，"blur" !== "mouseout"
虽然这是一个问题，但我觉得还有更多问题。 @blex。根据 MDN，textarea 不支持 value 属性。在这里它工作得很好。此外，innerText、innerHTML 和 value 都给出了不同的值。
其实我只需要显示texarea的默认文本，即使用户删除了textarea的所有文本
原始代码使用.innerHTML 而不是.value，在某个地方它在编辑中丢失了。新代码似乎有效。
@TusharShahi 值应该使用，元素的属性与element's interface不同。

标签： javascript textarea innerhtml onblur onfocus

【解决方案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;
  })
}

&lt;textarea name="" id="" cols="30" rows="10"&gt;Test&lt;/textarea&gt;

【讨论】：

【解决方案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;
    })
}

【讨论】：

嗨 Tushar Shashi，你几乎接近解决方案。在您的代码中，删除内容后，innerhtml 的 onfocus 删除不起作用。如果你也解决这个问题，这将是一个很好的解决方案。谢谢！
是的。顺便说一句，您是否考虑过使用占位符？这看起来像是一个用例。 codepen.io/tusharshahi/pen/XWRJzNw?editors=1111不需要任何JS
Tushar Shashi，其实我先试过了，但是当鼠标点击文本区域时，它并没有删除占位符。我希望隐藏现有的占位符会比在焦点中存在的用户体验更好。谢谢！
看看这个codepen。这对你有用吗。我现在正在使用占位符，所以关于 value/innerHTML 没有歧义
嗨 Tushar Shashi，我已经尝试过占位符方法。但是我正在寻找一个可以在用户关注文本区域时隐藏占位符的代码。谢谢！