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

编程问答 2022-04-22

问题描述

我试图隐藏和显示基于焦点和模糊的文本区域的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>

解决方法

此解决方案使用占位符：

<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;
    })
}
,

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

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>

innerhtmljavascriptonbluronfocustextareatextarea