如何通过点击文本触发JavaScript事件重置表单字段？

当然有啦！这是表单交互里很常见的需求，我给你两种实用的实现方式，你可以根据自己的场景选：

方法一：利用表单原生的reset()方法（最简洁） #

这个方法适合表单初始状态就是空的情况，它会把所有字段直接恢复到页面加载时的初始值，代码超简单：

首先是你的HTML结构（包含表单和提示文本）：

<form id="userForm">
  <div>
    <label>姓名：</label>
    <input type="text" name="username" id="username">
  </div>
  <div>
    <label>邮箱：</label>
    <input type="email" name="useremail" id="useremail">
  </div>
  <!-- 其他表单字段比如电话、单选框等都可以加在这里 -->
  <button type="submit">提交表单</button>
</form>

<!-- 提交后的提示信息 -->
<div class="prompt">
  不是您，<span id="displayName">哈利</span>？
  <span id="clearLink" style="color: #0066cc; cursor: pointer; text-decoration: underline;">点击此处</span>
</div>

然后写JavaScript逻辑：

// 获取清空按钮和表单元素
const clearLink = document.getElementById('clearLink');
const userForm = document.getElementById('userForm');

// 绑定点击事件
clearLink.addEventListener('click', function() {
  // 调用表单的reset方法，一键重置所有字段
  userForm.reset();
  
  // 顺便把提示里的用户名也清空（可选，根据你的需求）
  document.getElementById('displayName').textContent = '';
});

方法二：手动遍历清空字段（更灵活） #

如果你的表单有些字段有默认值（比如某些单选框默认选中），而你需要把它们彻底清空成“无内容”状态，就可以用这种方式，精准控制每个字段的清空逻辑：

clearLink.addEventListener('click', function() {
  const formElements = userForm.elements;
  
  // 遍历表单里的所有元素
  for (let i = 0; i < formElements.length; i++) {
    const elem = formElements[i];
    
    // 根据不同的字段类型做对应的清空操作
    switch(elem.type) {
      // 文本类输入框
      case 'text':
      case 'email':
      case 'password':
      case 'number':
      case 'textarea':
        elem.value = '';
        break;
      // 复选框和单选框
      case 'checkbox':
      case 'radio':
        elem.checked = false;
        break;
      // 下拉选择框
      case 'select-one':
        elem.selectedIndex = -1; // 取消所有选中
        break;
      case 'select-multiple':
        // 多选框要取消每个选项的选中状态
        for (let j = 0; j < elem.options.length; j++) {
          elem.options[j].selected = false;
        }
        break;
      // 其他类型可以按需扩展
      default:
        break;
    }
  }
  
  // 清空提示里的用户名
  document.getElementById('displayName').textContent = '';
});

小提示 #

• 可以给clearLink加个hover效果，让用户更清楚这是可点击的元素，比如CSS里加#clearLink:hover { color: #004499; }
• 如果是用框架（比如Vue/React），写法会更贴合框架的状态管理思路，但原生JS的方案是通用所有场景的～

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