阅读量:4
在HTML中，可以使用<textarea>标签来创建一个文本输入框。要在该输入框中显示文本文件，可以使用JavaScript来动态加载文件内容并将其设置为<textarea>的值。
以下是一个示例代码，展示了如何在<textarea>中显示文本文件内容：
<!DOCTYPE html> <html> <head> <title>Show Text File in Textarea</title> <script> function loadTextFile() { var fileInput = document.getElementById('fileInput'); var textarea = document.getElementById('textarea'); var file = fileInput.files[0]; var reader = new FileReader(); reader.onload = function(e) { textarea.value = e.target.result; }; reader.readAsText(file); } </script> </head> <body> <input type="file" id="fileInput" onchange="loadTextFile()"> <textarea id="textarea" rows="10" cols="50"></textarea> </body> </html> 在上面的代码中，我们创建了一个<input>元素用于选择文件，以及一个<textarea>元素用于显示文件内容。当用户选择文件后，onchange事件会触发loadTextFile()函数。
在loadTextFile()函数中，我们首先获取fileInput和textarea元素的引用。然后，我们通过fileInput.files[0]获取用户选择的文件，然后使用FileReader对象来读取文件内容。
在reader.onload事件处理函数中，我们使用e.target.result来获取文件内容，并将其设置为textarea的值，从而在文本输入框中显示文件内容。
请注意，由于安全原因，浏览器可能会限制对本地文件的访问。因此，如果您在本地文件系统上运行此示例，可能会出现安全错误。为了解决这个问题，您可以将代码部署到一个Web服务器上，以便从服务器上加载文件。
