javascript - 我如何使用* .txt文件作为输入值？

我有两个按钮...单击它们时，它们在输入字段中显示一些文本。我使用一些简单的javascript选择要显示的文本，用id="blabla1"在按钮下定义的文本，或用id="blabla2"在按钮下定义的文本。
是否可以显示在外部.txt文件中定义的文本？

在输入按钮下将文本定义为值时，它可以正常工作：

<input type="hidden" id="SupSite1Title" value="Subsite1 Title!"><br>

但我想从txt文件中代替文本。

<body>

<div id="leftnav">
<ul>
<li><input type="text" id="TextField1"><br><br></li>
</ul>
</div>

<div id="rightnav">
<ul>
<li><button id="blabla1" onclick="myFunction1()">Side1</button></li>
<li><button id="blabla2" onclick="myFunction2()">Side2</button></li>
</ul>
</div>


<input type="hidden" id="SupSite1Title" value="Subsite1 Title!"><br>
<input type="hidden" id="SupSite2Title" value="Subsite2 Title!"><br>


<script>
function myFunction1() {document.getElementById("TextField1").value =document.getElementById("SupSite1Title").value;
}
</script>
<script>
function myFunction2() {document.getElementById("TextField1").value =document.getElementById("SupSite2Title").value;
}
</script>

最佳答案

如果要显示.txt文件的文本内容...，可以使用称为FileReader API的API（您需要检查浏览器是否支持）。

这是你怎么做的：

更新：

var file1 = document.getElementById('file1');
var file2 = document.getElementById('file2');

document.getElementById('bOne').addEventListener("click", function(){getFile(file1)})
document.getElementById('bTwo').addEventListener("click", function(){getFile(file2)})


function getFile(target) {
	const input = target;
  if ('files' in input && input.files.length > 0) {
	  placeFileContent(
      document.getElementById('display'),
      input.files[0])
  }
}

function placeFileContent(target, file) {
	readFileContent(file).then(content => {
  	target.value = content
  }).catch(error => console.log(error))
}

function readFileContent(file) {
	const reader = new FileReader()
  return new Promise((resolve, reject) => {
    reader.onload = event => resolve(event.target.result)
    reader.onerror = error => reject(error)
    reader.readAsText(file)
  })
}

label {
display : block;
margin-top : 40px;
margin-bottom : 20px;
}

<label for="file1">Upload file 1 : </label>
<input type="file" accept=".txt" id="file1"  name="file1">

<label for="file2">Upload file 2 : </label>
<input type="file" accept=".txt" id="file2"  name="file2">


<button id="bOne">Display file1</button>
<button id="bTwo">Display file2</button>

<label for="file2">Selected file :  </label>
<input type="text" id="display" for="display">

方法N°2（从服务器获取数据）：

function fetchData(buttonNumber) {
  var btn1 = document.getElementById('b1')
  var btn2 = document.getElementById('b2')
  var display = document.getElementById('display')
  //fetching data
  if (buttonNumber == 1) {
    //replace 'file1.txt' with your file URL
    fetch('file1.txt').then(x => {
      x.text().then(function(text) {
        display.value = text
      });
    })
  } else {
    //replace 'file2.txt' with your file URL
    fetch('file2.txt').then(x => {
       x.text().then(function(text) {
        display.value = text
      });
    })
  }
}

#b1,
#b2 {
  display: block;
  margin: 40px;
}

<button id="b1" onclick="fetchData(1)">Get file 1 and show it</button>
<button id="b2" onclick="fetchData(2)">Get file 2 and show it</button>

<label for="file2">Selected file :  </label>
<input type="text" id="display" for="display">

关于javascript - 我如何使用* .txt文件作为输入值？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57126211/