无需操作form，能否给input绑定监听实现在表单提交前修改其值？

直接给input元素绑定submit事件监听器是行不通的——submit事件只由<form>元素触发，不会传递到表单内的输入控件。不过你可以通过以下两种方式实现需求，全程不用主动查找或操作form元素：

方法1：全局监听submit事件并判断归属 #

在document上监听所有表单的提交事件，然后检查当前提交的表单是否包含你的目标input，符合条件就修改值：

const myInput = document.getElementById('your-input-id');

document.addEventListener('submit', (e) => {
  if (e.target.contains(myInput)) {
    myInput.value = '修改后的内容';
  }
});

这种方式不用你手动获取form，只要input在某个表单里，提交时就会触发对应的修改逻辑。

方法2：监听input的formdata事件（现代浏览器支持） #

formdata事件会在表单准备发送数据时触发，且支持冒泡，所以可以直接绑定在input上：

const myInput = document.getElementById('your-input-id');

myInput.addEventListener('formdata', (e) => {
  // 修改input显示值
  myInput.value = '修改后的内容';
  // 同步更新要发送的表单数据（可选，确保后端收到最新值）
  e.formData.set(myInput.name, myInput.value);
});

这个方法更精准，只有当包含该input的表单提交时才会触发，不需要额外的判断逻辑。

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