創建.TXT使用Javascript

Question

我想創建一個.txt使用JavaScript這樣的工作：

<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 = \t 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.querySelectorAll，因爲您指定了要循環的input的類型。 getElementsByTagName()返回所有輸入，包括提交按鈕，並返回一個數組，所以你需要循環它。

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>

Answer 2

document.querySelector返回被選中或如果沒有則爲null（單數）的第一個元件。只要一個元素被發現訪問它的值屬性的作品。

document.getElementsByTyName返回具有提供的標籤名稱（複數）的元素數組。一個數組沒有屬性值，所以返回值將是undefined。反過來，你的文本文件應該包含像「未定義」的東西。

要選擇所有的文本輸入，來連接它們的值可能會使用類似：

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 3

的document.getElementsByTagName將返回所有的輸入，包括單選按鈕列表，並提交按鈕。所以你應該遍歷它們或者從數組中選擇一個單獨的元素。