將 .txt 文件中的文本拉入<input>值 HTML

Question

我會給你完整的故事。 我剛剛創建了一個新的 Web 服務器（我對這一切都很陌生！）

我編寫了一個 python 腳本，將折扣代碼（經常更改）輸出到 Web 服務器本身上的 .txt 文件。

我所需要的只是獲取該 .txt 文件的內容並將其添加到我的頁面<input value="HERE">這樣我就可以有一個按鈕來為用戶復制內容。

我一直在瀏覽 Javascript，但想知道我是否在錯誤的地方尋找它作為客戶端。

我嘗試嵌入文本文件，雖然頁面上顯示了該值，但我正在努力將其復制到剪貼板。 我似乎將復制功能固定在輸入框上，因此我只需要其中的值即可。

到目前為止，這就是我所擁有的，實際上需要“被復制”作為從我的 .txt 文件中提取的值：

 function myFunction() { var copyText = document.getElementById("input2"); copyText.select(); document.execCommand("copy"); }

 .btn { border: none; background-color: inherit; padding: 14px 28px; font-size: 16px; cursor: pointer; display: inline-block; } .btn:hover {background: #eee;} .success {color: green;}

 <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button type="button" value="COPY BUTTON" onclick="myFunction()">COPY BUTTON</button> <input type="text" value="TO BE COPIED" id="input2"> <form> <input type="button" class="btn success" value="Go to Google" onclick="window.location.href='https://www.google.com'" /> </form> <script src="test.js"></script> </body> </html>

謝謝你

Answer 1

在我看來，你有兩個選擇：

一種是使用fetch （或者 jQuery 的ajax如果你在你的網站上使用它）：

fetch("/file.txt")
    .then(response => response.text())
    .then(text => document.getElementById("input2").textContent = text);

您擁有的另一個選項是在后端讀取文件並將其作為數據傳輸到前端，這取決於您為后端使用的框架、語言和服務器，但您沒有在問題中指定任何這些。

此選項可能會更好，因為它需要更少的請求，這對性能更好，但這取決於您需要它的用途 - 如果您更願意動態呈現文件而不是從您的服務器將其插入頁面，那很好。 但是您確實需要考慮要使用哪一個以及為什么。

閱讀更多：

獲取瀏覽器支持
MDN - 使用 Fetch

Answer 2

下面是我將如何用 jQuery 做到這一點：

$.ajax({
    url: "file.txt",
    dataType: "text",
    success: function (data) {
         $("#input2").value(data);
    }
});

這將拉取file.txt的內容，如果它可以找到該文件，則將數據放入 ID 為input2的元素的value屬性中。

將 .txt 文件中的文本拉入<input>值 HTML

問題描述

2 個解決方案

解決方案1
1 2018-08-21 08:56:49

解決方案2
0 2018-08-21 08:22:51

將 .txt 文件中的文本拉入<input>值 HTML

問題描述

2 個解決方案

解決方案1 1 2018-08-21 08:56:49

解決方案2 0 2018-08-21 08:22:51

解決方案1
1 2018-08-21 08:56:49

解決方案2
0 2018-08-21 08:22:51