如何使我的“ TextArea”内容可见的HTML / Javascript

Question

我有一个HTML页面，我在其中从文本文件中获取数据并将其显示在TextArea中。数据正在按预期方式发送，但未以可见格式显示

如果您在TextArea中单击并拖动鼠标，就好像您正在突出显示/选择内容一样，则该内容可见，但不是单独显示的。

问题：这是我所能看到的

但是，当我通过单击并拖动来选择一些文本时，可以看到以下内容： image output 代码：

这是我正在使用的功能

function rdata() {
  var file = document.getElementById("myFile").files[0];
  var reader = new FileReader();
  reader.onload = function(e) {
    var textArea = document.getElementById("myTextArea");
    textArea.value = e.target.result;
  };
  reader.readAsText(file);
}

HTML：

<tr>
  <td colspan="2">
    <div class="container">
      <div class="backdrop">
        <div class="colors">
        </div>
      </div>
      <textarea id="myTextArea" onclick="rdata();"></textarea>
    </div>
  </td>
</tr>

CSS代码

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 50%;
}

td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}


input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.container, .backdrop, #myTextArea {
  font: 12px 'Open Sans', sans-serif;
  letter-spacing: 1px;
  width: 48%;
  height: 250px;
}

#myTextArea {
  margin: 0;
  position: absolute;
  border-radius: 0;
  background-color: transparent;
  z-index: 2;
  color: transparent;
  resize: none;
}

.backdrop {
  position: absolute;
  z-index: 1;
  border: 2px solid transparent;
  overflow: auto;
  pointer-events: none;
}

.colors {
  white-space: pre-wrap;
  word-wrap: break-word;
}

我已经将#myTextArea的颜色更改为黑色，但是我的文本显示为“ Blur”，我该如何解决

output appears blur

Answer 1

这是因为color: transparent;的CSS中的#myTextArea行。这导致文本是透明的。删除它或将其更改为实际的可见颜色。

Answer 2

change color in your CSS

 #myTextArea {
   margin: 0;
   position: absolute;
   border-radius: 0;
   background-color: transparent;
   z-index: 2;
   color: red;  /* i change it to red , u can change to any color u want */
   resize: none;
 }