使用 Javascript 创建 .txt

Question

我正在尝试使用 JavaScript 创建一个 .txt 这有效：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$("form").each(function() {
                $(this)
})

  var textarea = document.querySelector('textarea'); // document.querySelector => Get the first element in the document with tag textarea
  var anchor = document.querySelector('a');

  anchor.onclick = function() {
                anchor.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(textarea.value);
                anchor.download = 'export.txt';
  };
</script>
        <h2>PHP Form Validation Example</h2>
        <form>

            Name: <input type="text" name="name">
            <br><br>
            E-mail: <input type="text" name="email">
            <br><br>
            Web: <input type="text" name="website">
            <br><br>
            Kom: <textarea name="comment" rows="5" cols="40"></textarea>
            <br><br>
            G:
            <input type="radio" name="gender" value="w">w
            <input type="radio" name="gender" value="m">m
            <br><br>
            <input type="submit" name="submit" value="Submit">
            <textarea></textarea>
            <p><a href="#">Export</a></p>
</form>

浏览器下载一个 .txt 文件，其中包含用户输入字段的数据。

但是如果我尝试这样做，下载的 .txt 文件结果会显示未知。

var input = document.getElementsByTagName("input");
var anchor = document.querySelector('a');
            
anchor.onclick = function() {
       anchor.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(input.value);
       anchor.download = 'export.txt';
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<h2>PHP Form Validation Example</h2>
<form>
    Name: <input type="text" name="name">
    <br><br>
    E-mail: <input type="text" name="email">
    <br><br>
    Web: <input type="text" name="website">
   <br><br>
   Kom: <textarea name="comment" rows="5" cols="40"></textarea>
   <br><br>
   G:
   <input type="radio" name="gender" value="w">w
   <input type="radio" name="gender" value="m">m
   <br><br>
   <input type="submit" name="submit" value="Submit">
   <textarea></textarea>
   <p><a href="#">Export</a></p>
</form>

Answer 1

document.querySelector return 是 select 的第一个元素，如果 none（单数）则为空。只要找到一个元素访问它的值属性就可以。

document.getElementsByTyName returns 具有提供的标签名称（复数）的元素数组。数组没有属性值，因此 return 值将为 undefined。反过来，您的文本文件应包含类似 "undefined" 的内容。

要 select 所有文本输入并连接它们的值，您可以使用类似的东西：

var textInputs = document.querySelectorAll("input[type=text], textarea");
var values = [];
for (var i = 0; i < textInputs.length; i++) { 
  values.push(textInputs[0].value) 
}
console.log(values.toString())

Answer 2

document.getElementsByTagName 将 return 列出您所有的输入，包括单选按钮和提交按钮。因此，您应该遍历它们或 select 数组中的单个元素。

Answer 3

使用 document.querySelectorAll 因为您指定要循环的 input 类型。 getElementsByTagName() return 所有输入，包括提交按钮，它 return 是一个数组，所以你需要遍历它。

var inputs = $("input[type=text], textarea");
var anchor = document.querySelector('a');

anchor.onclick = function() {

       var content = '';
       inputs.each(function(){
         content += ' '+ $(this).val();
       });
  
       anchor.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(content);
       anchor.download = 'export.txt';
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<h2>PHP Form Validation Example</h2>
<form>
    Name: <input type="text" name="name">
    <br><br>
    E-mail: <input type="text" name="email">
    <br><br>
    Web: <input type="text" name="website">
   <br><br>
   Kom: <textarea name="comment" rows="5" cols="40"></textarea>
   <br><br>
   G:
   <input type="radio" name="gender" value="w">w
   <input type="radio" name="gender" value="m">m
   <br><br>
   <input type="submit" name="submit" value="Submit">
   <textarea></textarea>
   <p><a href="#">Export</a></p>
</form>

使用 Javascript 创建 .txt

Create .txt using Javascript

javascript

input

forms

getelementsbytagname