Estoy intentando configurar una forma sencilla para que una persona sin conocimientos técnicos actualice un teletipo de marquesina que aparecerá en un sitio web que se publicará en nuestro sistema de visualización BrightSign. Pensé que podrían escribir fácilmente lo que quisieran en un archivo de texto, guardarlo y "volver a publicar" el sitio web en nuestro sistema de visualización. Todos los archivos (index.html, style.css, tickerText.txt) se guardarían localmente en una computadora para que la persona a cargo edite la marquesina.
Todo funciona bien cuando escribo el texto entre mis etiquetas de marquesina, pero cuando intento extraer la información de un archivo de texto, se desplaza con una gran cantidad de "espacios en blanco" y texto no tan largo. La siguiente secuencia de comandos muestra cuándo sale correctamente (se muestra en el enlace de la imagen, no me dejaba incrustar).
<!-- 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>La siguiente secuencia de comandos es cuando trato de llenar la marquesina desde un archivo de texto y luego arruino mi formato (que se muestra en la imagen, no me deja incrustar).
Marquesina de formato incorrecto
<!-- 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>Incluso intenté agregar un estilo en línea a la etiqueta del objeto para intentar que la marquesina no fuera tan grande y para aumentar el tamaño del texto, pero nada parece funcionar. Puede que me esté equivocando al tratar de leer en un archivo de texto. Probé algo de JavaScript, pero no pude hacerlo funcionar y, aunque solo una etiqueta de marquesina funcionaría bien. Cualquier ayuda sería apreciada.
Para confirmar, no usé AJAX ya que el sitio web no muestra sus cambios en el sistema de visualización hasta que presionamos el botón de publicar nuevamente. Por lo tanto, las actualizaciones en vivo del sitio web sin actualizar serían excesivas.
Bueno, podrías probar esto:
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>Esto funcionará para lo que desea, también los datos en el archivo de texto podrían formatearse si es necesario.
Como se dijo en el comentario de A Haworth ,
La etiqueta <marquee></marquee> ahora está obsoleta.
Además, puede omitir incluso tener un archivo de texto haciendo esto:
(Nota: este se adapta mejor a sus necesidades, por ahora).
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>