如何点击HTML按钮触发下载含文本框内容的.txt文件？

要实现这个需求，必须用JavaScript配合HTML完成，纯HTML没法动态获取输入框里的内容生成下载文件。下面是具体的实现方案和完整代码：

实现思路 #

1. 调整HTML结构：移除表单的action和method（不需要提交到后端），给输入框和按钮加id方便JS定位元素，把提交按钮改成普通按钮（或保留submit但阻止默认提交行为）。
2. 编写JS逻辑：监听按钮点击事件，获取输入框内容，生成TXT格式的Blob对象，创建临时下载链接触发浏览器下载，最后清理临时链接释放资源。

完整代码示例（推荐方案） #

<input
  type="text"
  value="String"
  name="string"
  id="inputText"
/>
<button id="downloadBtn">下载TXT</button>

<script>
// 获取页面元素
const inputText = document.getElementById('inputText');
const downloadBtn = document.getElementById('downloadBtn');

// 绑定按钮点击事件
downloadBtn.addEventListener('click', () => {
  // 获取输入框内容，为空时提示
  const content = inputText.value.trim();
  if (!content) {
    alert('请输入要下载的内容');
    return;
  }
  
  // 创建TXT格式的Blob对象
  const blob = new Blob([content], { type: 'text/plain' });
  // 生成临时下载链接
  const url = URL.createObjectURL(blob);
  // 动态创建a标签触发下载
  const downloadLink = document.createElement('a');
  downloadLink.href = url;
  // 设置下载的文件名，可自定义
  downloadLink.download = 'my-content.txt';
  // 触发点击下载
  downloadLink.click();
  // 清理临时链接，避免内存占用
  URL.revokeObjectURL(url);
});
</script>

保留原表单结构的替代方案 #

如果一定要保留你原来的表单写法，可以给表单绑定submit事件并阻止默认提交行为，把下载逻辑写在事件回调里：

<form id="downloadForm">
  <input
    type="text"
    value="String"
    name="string"
    id="inputText"
  />
  <input type="submit" value="下载" />
</form>

<script>
const form = document.getElementById('downloadForm');
const inputText = document.getElementById('inputText');

form.addEventListener('submit', (e) => {
  // 阻止表单默认提交到后端的行为
  e.preventDefault();
  
  const content = inputText.value.trim();
  if (!content) {
    alert('请输入要下载的内容');
    return;
  }
  
  const blob = new Blob([content], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const downloadLink = document.createElement('a');
  downloadLink.href = url;
  downloadLink.download = 'my-content.txt';
  downloadLink.click();
  URL.revokeObjectURL(url);
});
</script>

内容的提问来源于stack exchange，提问作者My Car