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

时间:2018-08-21 08:11:18

标签: javascript html

我会给你完整的故事。我刚刚创建了一个新的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>

谢谢

2 个答案:

答案 0 :(得分:1)

据我所知,您有两个选择:

一个正在使用fetch(如果在网站上使用,则使用jQuery的ajax):

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

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

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

了解详情

答案 1 :(得分:0)

这是我使用jQuery的方法:

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

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