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);

您拥有的另一种选择是在后端读取文件并将其作为数据传输到前端，这取决于您后端所使用的框架，语言和服务器，但是您没有在问题中指定任何文件。

此选项可能会更好，因为它需要较少的请求，这会提高性能，但这取决于您需要的内容-如果您希望动态呈现文件而不是将文件从页面中的服务器中插入，就可以了。。但是您确实需要考虑要使用哪一个以及为什么。

了解详情：

Answer 2

这是我使用jQuery的方法：

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

这将提取file.txt的内容，如果可以找到文件，则将数据放入ID为value的元素的input2属性中。

将.txt文件中的文本提取到<input />值HTML

2 个答案: