Question

我试图将文本文件放入textarea。结果是“http://mywebsite.com/textfile/(txtinput).txt，文本文件未加载到textarea中。

<html>
   <head>
      <title>textbox</title>
      <script type="text/javascript">
         function readBOX() {
            var txtinput = document.getElementById('txtinput').value;
            document.forms[0].text.value = ("http://mywebsite.com/textfile/") + txtinput +(".txt");
         }
      </script>
   </head>
   <body>
      <p> Type</p>
      <input type="text" id="txtinput" />
      <input id="open" type="button" value="READ" onClick="readBOX()" />
      <form>
         <textarea name="text" rows="20" cols="70">loaded text here</textarea>
      </form>
   </body>
</html>

Answer 1

您必须使用this Answer

中张贴的内容

的jQuery

$(document).ready(function() {
   $("#open").click(function() {
       $.ajax({
           url : "helloworld.txt",
           dataType: "text",
           success : function (data) {
               $("#text").text(data);
           }
       });
   });
});

详细了解jQuery Documentation of .ajax()

非jQuery

我不想使用jQuery，你必须使用XMLHttpRequest - 这样的对象：

var xmlhttp, text;
xmlhttp = new XMLHttpRequest();
xmlhttp.open('GET', 'http://www.example.com/file.txt', false);
xmlhttp.send();
text = xmlhttp.responseText;

但这可以在SO-Answer here或Wikipedia上的完整且可理解的文档中阅读

注意：但这不是跨浏览器兼容的，对于较旧的IE版本，您必须使用ActiveXObject("Microsoft.XMLHTTP")对象

Answer 2

谢谢大家。 Javascript对我不起作用。我改为PHP，它运行得很好。

<!DOCTYPE HTML>
<html>
   <head>
      <title>textbox</title>
   </head>
   <body>
<form action="process.php" method="post">
      <input type="text" name="name" />
      <input type="submit" />
</form>
   </body>
</html>

Process.php

<textarea name="text" rows="20" cols="70"> 
<?php $name =  $_POST["name"]; echo file_get_contents("$name");?>
</textarea>

Answer 3

这就是我将文本加载到textarea

的方法

UIActivityViewController

google textarea查找文本区域的格式

Answer 4

最简单的方法之一是请求服务器返回预填充的textarea （这是使用PHP的示例）：

<textarea name="text" rows="20" cols="70">
<?php
echo file_get_contents('yourFile.txt');
?>
</textarea>

注意：可以使用任何server-side scripting language进行类似的操作。

与此同时，如果您需要动态加载它，最好的办法是使用AJAX方法。选择哪种方法最适合您进行编码和维护。虽然jQuery是一种流行的方法，但您可以自由地使用任何您感觉舒适的东西，并且可能首先想要了解XmlHttpRequest。

使用Pure JavaScript进行动态AJAX请求可能会非常棘手，因此请确保您的解决方案是跨浏览器的。一个常见的错误是直接使用XmlHtpRequest并且无法使其与旧的IE版本兼容，这会导致随机错误，具体取决于您使用的浏览器/版本。例如，它可能看起来像这样（需要在所有目标浏览器上进行测试，以便在需要时添加回退）：

纯JS：

if (typeof XMLHttpRequest === "undefined") {
    XMLHttpRequest = function () {
        try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
        catch (e) {}
        try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
        catch (e) {}
        try { return new ActiveXObject("Microsoft.XMLHTTP"); }
        catch (e) {}
        throw new Error("This browser does not support XMLHttpRequest.");
    };
}

function readBOX() {
    function reqListener () {
        document.forms[0].text.value = this.responseText;
    }

    var txtinput = document.getElementById("txtinput").value;
    var filePath = "http://mywebsite.com/textfile/" + txtinput + ".txt";

    var oReq = new XMLHttpRequest();
    oReq.onload = reqListener;
    oReq.open("get", filePath, true);
    oReq.send();
}

但如果你不介意牺牲一些表演来确保最大程度的支持，你应该使用jQuery的实现：

<强> jQuery的：

function readBOX() {
    var txtinput = document.getElementById("txtinput").value;
    var filePath = "http://mywebsite.com/textfile/" + txtinput + ".txt";

    $.ajax({
        url: filePath
    }).done(function(data){
        document.forms[0].text.value = data;
    });
}

注意：jQuery的库有点大，但请记住，如果直接从谷歌服务器中包含它，你的用户很可能已将它放在缓存中。

希望这会有所帮助：）

Answer 5

window.addEventListener('DOMContentLoaded', (e) => {
    let input = document.getElementById('input');
    
    // load default.txt into input box
    try {
        let fileToLoad = './default.txt';
        let xmlhttp = new XMLHttpRequest();
        xmlhttp.open('GET', fileToLoad, false);
        xmlhttp.send();
        input.innerHTML = xmlhttp.responseText;
    } catch(DOMException) {
        input.innerHTML = "Error loading file. Maybe related to filepath or CORS?";
    }
});

将.txt文件加载到textarea Javascript中？

5 个答案:

的jQuery

非jQuery