在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服務器上,以便從服務器上加載文件。