从文件上传 html 的 textarea 中删除模糊 | CSS | javascript

Question

我有一个 html 页面，我希望文本看起来清晰而不模糊

当我上传文件时，会从文件中读取文本并显示在 TextArea 上，但文本似乎是模糊的

我使用的概念是，当我键入某个特定关键字时，如果该特定关键字与 textarea 中的某个类型匹配，那么它会以不同的颜色显示，例如关键字“已连接”，如果我在 textarea 中键入它，则显示为绿色，这就是我的功能已定义

问题：当我从文件中获取文本时，文本显示在我的 textarea 上但出现模糊如何修复该模糊

使用此文件并查看模糊内容 您能否上传此文本文件并查看（示例文本文件）链接：sendspace.com/file/67ge9n 您可能会看到模糊内容，如图像 sendspace.com/file/r25qme 所示

const color = {
  "connected successfully": "green",
  "connected": "green",
  "connection failure": "red"
};
let textArea = document.getElementById("myTextArea");
let colorsArea = document.querySelector(".colors");
let backdrop = document.querySelector(".backdrop");

// Event listeners.

textArea.addEventListener("input", function() {
  colorsArea.innerHTML = applyColors(textArea.value);
});

textArea.addEventListener("scroll", function() {
  backdrop.scrollTop = textArea.scrollTop;
});

function applyColors(text) {
  let re = new RegExp(Object.keys(color).join("|"), "gi");

  return text.replace(re, function(m) {
    let c = color[m.toLowerCase()];
    return `<spam style="color:${c}">${m}</spam>`;
  });
}



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

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: black;
  /* i change it to red , u can change to any color u want */
  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;
}

<tr>
  <td><input id="myFile" type="file" /></td>

</tr>

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

Answer 1

它不是模糊的吗？你的代码是正确的