javascript - 从文本文件填充 HTML Ticker

Question

我正在尝试为非精通技术的人设置一种简单的方法来更新将出现在将发布到我们的 BrightSign 显示系统的网站上的选取框代码。我认为他们可以轻松地将他们想要的内容输入文本文件，保存，然后将网站“重新发布”到我们的显示系统。所有文件（index.html、style.css、tickerText.txt）都将保存在本地计算机上，供负责人编辑选取框。

当我在选取框标签之间输入文本时，一切正常，但是当我尝试从文本文件中提取信息时，它会滚动显示大量“空白”而不是长文本。下面的脚本显示它何时正确显示（显示在图片链接中 - 不允许我嵌入）。

长文本选框

<!-- Bottom Marquee Ticker -->
<div class="3-row-padding w3-center">
    <div class="w3-container ocacity75"">
        <div class="w3-card-4 w3-white w3-round ticker">    
            <marquee>This is a test and so is this</marquee>
        </div>
    </div>
</div>  

下面的脚本是当我尝试从文本文件中填充选框然后弄乱我的格式（如图所示 - 不允许我嵌入）。

格式不正确的选框

<!-- Bottom Marquee Ticker -->
<div class="3-row-padding w3-center">
    <div class="w3-container ocacity75"">
        <div class="w3-card-4 w3-white w3-round ticker">    
            <marquee><object type="text/html" data="./TickerText.txt"></object></marquee>
        </div>
    </div>
</div>  

我什至尝试向对象标签添加内联样式以尝试使选取框不那么大并增加文本大小，但似乎没有任何效果。尝试读取文本文件时，我可能会遇到这个错误。我尝试了一些 JavaScript，但我无法让它工作，虽然只是一个选取框标签就可以了。任何帮助将不胜感激。

为了确认，我没有使用 AJAX，因为网站不会在显示系统上显示其更改，直到我们再次点击发布按钮。因此，在不刷新的情况下对网站进行实时更新将是矫枉过正。

标签： javascripthtmlcss

Answer 1

好吧，你可以试试这个：

var input = document.getElementById("myFile");
var output = document.getElementById("output");

input.addEventListener("change", function() {
  if (this.files && this.files[0]) {
    var myFile = this.files[0];
    var reader = new FileReader();

    reader.addEventListener('load', function(e) {
      output.textContent = e.target.result;
    });

    reader.readAsBinaryString(myFile);
  }
});

#styleTest {
  color: green;
}

<input type="file" id="myFile">
<div id="styleTest">
  <div id="output"></div>
</div>

这将满足您的需求，如果需要，文本文件中的数据也可以进行格式化。

正如A Haworth在评论中所说，

该<marquee></marquee>标签现已弃用。

此外，您甚至可以通过执行以下操作绕过文本文件：

（注意：目前这个更适合您的需求。）

var input = document.getElementById("input");
var output = document.getElementById("output");
var txtInSub = document.getElementById("txtInSub");

function addData() {
  output.innerHTML = input.value;
}

window.addEventListener("keydown", checkKeyPressed, false);

function checkKeyPressed(e) {
    e = e || window.event;
    var key = e.which || e.keyCode;
    // key == "13" is the enter key
    if (key == "13") {
        txtInSub.click();
        console.log({keyPressed: "Enter", functionExecution: "Submitted the Text Input Field", contentPosted: input.value});
    }
}

#styleTest {
  color: green;
}

#inSubFld {
  text-align: center;
  width: 98.22%;
  position: absolute;
  left: 0;
  top: 60px;
}

#input {
  width: 100%;
  padding: 10px;
  display: block;
}

#txtInSub {
  display: none;
}

<div id="styleTest">
  <div id="output"></div>
</div>

<div id="inSubFld">
  <input id="input" type="text" autofocus> <!-- with autofocus it should force it so that you could type in the input field without needing to click it -->
  <button id="txtInSub" onclick="addData()">Submit</button>
  <p>Press Enter to Submit the content in the field above.</p>
</div>