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

Question

我有一个 html 页面，我希望其中的文本清晰而不模糊

当我上传文件时，文本从文件中读取并显示在 TextArea 上，但文本看起来很模糊

我使用的概念是，当我键入某个特定关键字时，如果该特定关键字与文本区域中的类型匹配，那么它会以不同的颜色显示，如关键字“connected”，如果我在文本区域中键入它，那么 apperas green 这是如何我的功能已定义

问题:当我从文件中获取文本时，文本显示在我的文本区域中，但看起来很模糊如何解决这个问题

处理这个文件并查看给出的模糊内容您能否上传此文本文件并查看(示例文本文件)链接: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

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